<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Chapter 2 Prerequisites | JavaScript for R</title>
  <meta name="description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="generator" content="bookdown 0.21 and GitBook 2.6.7" />

  <meta property="og:title" content="Chapter 2 Prerequisites | JavaScript for R" />
  <meta property="og:type" content="book" />
  
  
  <meta property="og:description" content="Invite JavaScript into your Data Science workflow." />
  <meta name="github-repo" content="JohnCoene/javascript-for-r" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Chapter 2 Prerequisites | JavaScript for R" />
  
  <meta name="twitter:description" content="Invite JavaScript into your Data Science workflow." />
  

<meta name="author" content="John Coene" />


<meta name="date" content="2021-04-19" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="intro-overview.html"/>
<link rel="next" href="widgets-intro-intro.html"/>
<script src="libs/jquery-3.5.1/jquery.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />









<script src="libs/htmlwidgets-1.5.3/htmlwidgets.js"></script>
<script src="libs/plotly-binding-4.9.3/plotly.js"></script>
<script src="libs/typedarray-0.1/typedarray.min.js"></script>
<link href="libs/crosstalk-1.1.1/css/crosstalk.css" rel="stylesheet" />
<script src="libs/crosstalk-1.1.1/js/crosstalk.min.js"></script>
<link href="libs/plotly-htmlwidgets-css-1.57.1/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="libs/plotly-main-1.57.1/plotly-latest.min.js"></script>
<script src="libs/core-js-2.5.3/shim.min.js"></script>
<script src="libs/react-16.12.0/react.min.js"></script>
<script src="libs/react-16.12.0/react-dom.min.js"></script>
<script src="libs/reactwidget-1.0.0/react-tools.js"></script>
<script src="libs/reactable-binding-0.2.3/reactable.js"></script>
<script src="libs/r2d3-render-0.1.0/r2d3-render.js"></script>
<script src="libs/webcomponents-2.0.0/webcomponents.js"></script>
<script src="libs/r2d3-binding-0.2.5/r2d3.js"></script>
<script src="libs/d3v6-6.2.0/d3.min.js"></script>
<script src="libs/viz-1.8.2/viz.js"></script>
<link href="libs/DiagrammeR-styles-0.2/styles.css" rel="stylesheet" />
<script src="libs/grViz-binding-1.0.6.1/grViz.js"></script>
<link href="libs/datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
<script src="libs/datatables-binding-0.17/datatables.js"></script>
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="libs/dt-core-1.10.20/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="libs/dt-core-1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-74544116-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-74544116-1');
</script>
<meta property="og:title" content="Chapter 2 Prerequisites | JavaScript for R">
<meta property="og:description" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta property="og:image" content="https://book.javascript-for-r.com/images/social.png">
<meta property="og:url" content="https://book.javascript-for-r.com/">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Chapter 2 Prerequisites | JavaScript for R">
<meta name="twitter:image:alt" content="Book on using JavaScript with R for visualisations, web development, and computations.">
<meta name="twitter:site" content="@jdatap">


<style type="text/css">
a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
  { position: relative; left: -4em; }
pre.numberSource a.sourceLine::before
  { content: attr(title);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; pointer-events: all; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {  }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/toc.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">JavaScript for R</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>Preface</a><ul>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#premise"><i class="fa fa-check"></i>Premise</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#book-structure"><i class="fa fa-check"></i>Book Structure</a></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html#acknowledgement"><i class="fa fa-check"></i>Acknowledgement</a></li>
</ul></li>
<li class="part"><span><b>I Basics and Roadmap</b></span></li>
<li class="chapter" data-level="1" data-path="intro-overview.html"><a href="intro-overview.html"><i class="fa fa-check"></i><b>1</b> Overview</a><ul>
<li class="chapter" data-level="1.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-overview-rationale"><i class="fa fa-check"></i><b>1.1</b> Rationale</a></li>
<li class="chapter" data-level="1.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-methods"><i class="fa fa-check"></i><b>1.2</b> Methods</a><ul>
<li class="chapter" data-level="1.2.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-v8"><i class="fa fa-check"></i><b>1.2.1</b> V8</a></li>
<li class="chapter" data-level="1.2.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-htmlwidgets"><i class="fa fa-check"></i><b>1.2.2</b> htmlwidgets</a></li>
<li class="chapter" data-level="1.2.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-shiny"><i class="fa fa-check"></i><b>1.2.3</b> Shiny</a></li>
</ul></li>
<li class="chapter" data-level="1.3" data-path="intro-overview.html"><a href="intro-overview.html#intro-amiss"><i class="fa fa-check"></i><b>1.3</b> Methods Amiss</a><ul>
<li class="chapter" data-level="1.3.1" data-path="intro-overview.html"><a href="intro-overview.html#intro-reactr-vuer"><i class="fa fa-check"></i><b>1.3.1</b> reactR &amp; vueR</a></li>
<li class="chapter" data-level="1.3.2" data-path="intro-overview.html"><a href="intro-overview.html#intro-r2d3"><i class="fa fa-check"></i><b>1.3.2</b> r2d3</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="2" data-path="prerequisites.html"><a href="prerequisites.html"><i class="fa fa-check"></i><b>2</b> Prerequisites</a><ul>
<li class="chapter" data-level="2.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-package-dev"><i class="fa fa-check"></i><b>2.1</b> R Package Development</a><ul>
<li class="chapter" data-level="2.1.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-create-pkg"><i class="fa fa-check"></i><b>2.1.1</b> Creating a Package</a></li>
<li class="chapter" data-level="2.1.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-metadata"><i class="fa fa-check"></i><b>2.1.2</b> Metadata</a></li>
<li class="chapter" data-level="2.1.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-r-code"><i class="fa fa-check"></i><b>2.1.3</b> R code</a></li>
<li class="chapter" data-level="2.1.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-documentation"><i class="fa fa-check"></i><b>2.1.4</b> Documentation</a></li>
<li class="chapter" data-level="2.1.5" data-path="prerequisites.html"><a href="prerequisites.html#basics-installed-files"><i class="fa fa-check"></i><b>2.1.5</b> Installed files</a></li>
<li class="chapter" data-level="2.1.6" data-path="prerequisites.html"><a href="prerequisites.html#basics-build-load-install"><i class="fa fa-check"></i><b>2.1.6</b> Build, load, and install</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-json"><i class="fa fa-check"></i><b>2.2</b> JSON</a><ul>
<li class="chapter" data-level="2.2.1" data-path="prerequisites.html"><a href="prerequisites.html#serialising"><i class="fa fa-check"></i><b>2.2.1</b> Serialising</a></li>
<li class="chapter" data-level="2.2.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-tabular"><i class="fa fa-check"></i><b>2.2.2</b> Tabular Data</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-javascript"><i class="fa fa-check"></i><b>2.3</b> JavaScript</a><ul>
<li class="chapter" data-level="2.3.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-chrome-devtools"><i class="fa fa-check"></i><b>2.3.1</b> Developer Tools</a></li>
<li class="chapter" data-level="2.3.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-var-scope"><i class="fa fa-check"></i><b>2.3.2</b> Variable Declaration and Scope</a></li>
<li class="chapter" data-level="2.3.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-object-model"><i class="fa fa-check"></i><b>2.3.3</b> Document Object Model</a></li>
</ul></li>
<li class="chapter" data-level="2.4" data-path="prerequisites.html"><a href="prerequisites.html#basics-shiny"><i class="fa fa-check"></i><b>2.4</b> Shiny</a><ul>
<li class="chapter" data-level="2.4.1" data-path="prerequisites.html"><a href="prerequisites.html#basics-static-files"><i class="fa fa-check"></i><b>2.4.1</b> Serving Static Files</a></li>
<li class="chapter" data-level="2.4.2" data-path="prerequisites.html"><a href="prerequisites.html#basics-htmltools"><i class="fa fa-check"></i><b>2.4.2</b> Htmltools</a></li>
<li class="chapter" data-level="2.4.3" data-path="prerequisites.html"><a href="prerequisites.html#basics-deps-pro-cons"><i class="fa fa-check"></i><b>2.4.3</b> Serving vs. htmltools</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>II Data Visualisation</b></span></li>
<li class="chapter" data-level="3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html"><i class="fa fa-check"></i><b>3</b> Introduction to Widgets</a><ul>
<li class="chapter" data-level="3.1" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-plotly"><i class="fa fa-check"></i><b>3.1</b> Plotly package</a></li>
<li class="chapter" data-level="3.2" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-dt"><i class="fa fa-check"></i><b>3.2</b> DT package</a></li>
<li class="chapter" data-level="3.3" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-crosstalk"><i class="fa fa-check"></i><b>3.3</b> Crosstalk</a></li>
<li class="chapter" data-level="3.4" data-path="widgets-intro-intro.html"><a href="widgets-intro-intro.html#widgets-intro-conclude"><i class="fa fa-check"></i><b>3.4</b> Wrap-up</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="widgets-basics.html"><a href="widgets-basics.html"><i class="fa fa-check"></i><b>4</b> Basics of Building Widgets</a><ul>
<li class="chapter" data-level="4.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-study"><i class="fa fa-check"></i><b>4.1</b> Read and Study</a></li>
<li class="chapter" data-level="4.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates"><i class="fa fa-check"></i><b>4.2</b> Candidate Libraries</a><ul>
<li class="chapter" data-level="4.2.1" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-plotly"><i class="fa fa-check"></i><b>4.2.1</b> Plotly.js</a></li>
<li class="chapter" data-level="4.2.2" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-highcharts"><i class="fa fa-check"></i><b>4.2.2</b> Highchart.js</a></li>
<li class="chapter" data-level="4.2.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-candidates-chart.js"><i class="fa fa-check"></i><b>4.2.3</b> Chart.js</a></li>
</ul></li>
<li class="chapter" data-level="4.3" data-path="widgets-basics.html"><a href="widgets-basics.html#widgets-basics-inner-workings"><i class="fa fa-check"></i><b>4.3</b> How It Works</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="widgets-first.html"><a href="widgets-first.html"><i class="fa fa-check"></i><b>5</b> Your First Widget</a><ul>
<li class="chapter" data-level="5.1" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-scaffold"><i class="fa fa-check"></i><b>5.1</b> The Scaffold</a></li>
<li class="chapter" data-level="5.2" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-htmloutput"><i class="fa fa-check"></i><b>5.2</b> The HTML Output</a></li>
<li class="chapter" data-level="5.3" data-path="widgets-first.html"><a href="widgets-first.html#widgets-first-js-files"><i class="fa fa-check"></i><b>5.3</b> JavaScript Files</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="widgets-realistic.html"><a href="widgets-realistic.html"><i class="fa fa-check"></i><b>6</b> A Realistic Widget</a><ul>
<li class="chapter" data-level="6.1" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-deps"><i class="fa fa-check"></i><b>6.1</b> Dependencies</a></li>
<li class="chapter" data-level="6.2" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-implementation"><i class="fa fa-check"></i><b>6.2</b> Implementation</a></li>
<li class="chapter" data-level="6.3" data-path="widgets-realistic.html"><a href="widgets-realistic.html#widgets-realistic-html-element"><i class="fa fa-check"></i><b>6.3</b> HTML Element</a></li>
</ul></li>
<li class="chapter" data-level="7" data-path="widgets-full.html"><a href="widgets-full.html"><i class="fa fa-check"></i><b>7</b> The Full Monty</a><ul>
<li class="chapter" data-level="7.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-deps"><i class="fa fa-check"></i><b>7.1</b> Dependencies</a></li>
<li class="chapter" data-level="7.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-js"><i class="fa fa-check"></i><b>7.2</b> JavaScript</a></li>
<li class="chapter" data-level="7.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-data"><i class="fa fa-check"></i><b>7.3</b> Working with Data</a></li>
<li class="chapter" data-level="7.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data"><i class="fa fa-check"></i><b>7.4</b> Transforming Data</a><ul>
<li class="chapter" data-level="7.4.1" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-js"><i class="fa fa-check"></i><b>7.4.1</b> Using JavaScript</a></li>
<li class="chapter" data-level="7.4.2" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify"><i class="fa fa-check"></i><b>7.4.2</b> Modify Serialiser</a></li>
<li class="chapter" data-level="7.4.3" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-replace"><i class="fa fa-check"></i><b>7.4.3</b> Replace Serialiser</a></li>
<li class="chapter" data-level="7.4.4" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-modify-data"><i class="fa fa-check"></i><b>7.4.4</b> Modify the Data</a></li>
<li class="chapter" data-level="7.4.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-transform-data-conclusion"><i class="fa fa-check"></i><b>7.4.5</b> Pros and Cons</a></li>
</ul></li>
<li class="chapter" data-level="7.5" data-path="widgets-full.html"><a href="widgets-full.html#widgets-full-on-print"><i class="fa fa-check"></i><b>7.5</b> On Print Method</a></li>
</ul></li>
<li class="chapter" data-level="8" data-path="widgets-adv.html"><a href="widgets-adv.html"><i class="fa fa-check"></i><b>8</b> Advanced Topics</a><ul>
<li class="chapter" data-level="8.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-shared"><i class="fa fa-check"></i><b>8.1</b> Shared Variables</a><ul>
<li class="chapter" data-level="8.1.1" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing"><i class="fa fa-check"></i><b>8.1.1</b> Sizing</a></li>
<li class="chapter" data-level="8.1.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-sizing-policy"><i class="fa fa-check"></i><b>8.1.2</b> Sizing Policy</a></li>
</ul></li>
<li class="chapter" data-level="8.2" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-resizing"><i class="fa fa-check"></i><b>8.2</b> Resizing</a></li>
<li class="chapter" data-level="8.3" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prerender"><i class="fa fa-check"></i><b>8.3</b> Pre Render Hooks and Security</a></li>
<li class="chapter" data-level="8.4" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-js"><i class="fa fa-check"></i><b>8.4</b> JavaScript Code</a></li>
<li class="chapter" data-level="8.5" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-prepend-append"><i class="fa fa-check"></i><b>8.5</b> Prepend and Append Content</a></li>
<li class="chapter" data-level="8.6" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-dependencies"><i class="fa fa-check"></i><b>8.6</b> Dependencies</a></li>
<li class="chapter" data-level="8.7" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-compatibility"><i class="fa fa-check"></i><b>8.7</b> Compatibility</a></li>
<li class="chapter" data-level="8.8" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-unit-tests"><i class="fa fa-check"></i><b>8.8</b> Unit Tests</a></li>
<li class="chapter" data-level="8.9" data-path="widgets-adv.html"><a href="widgets-adv.html#widgets-adv-performances"><i class="fa fa-check"></i><b>8.9</b> Performances</a></li>
</ul></li>
<li class="chapter" data-level="9" data-path="linking-widgets.html"><a href="linking-widgets.html"><i class="fa fa-check"></i><b>9</b> Linking Widgets</a><ul>
<li class="chapter" data-level="9.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-examples"><i class="fa fa-check"></i><b>9.1</b> Crosstalk Examples</a></li>
<li class="chapter" data-level="9.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-req"><i class="fa fa-check"></i><b>9.2</b> Crosstalk Requirements</a></li>
<li class="chapter" data-level="9.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-inner-workings"><i class="fa fa-check"></i><b>9.3</b> How it Works</a><ul>
<li class="chapter" data-level="9.3.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-keys"><i class="fa fa-check"></i><b>9.3.1</b> Keys</a></li>
<li class="chapter" data-level="9.3.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-communication-lines"><i class="fa fa-check"></i><b>9.3.2</b> Communication Lines</a></li>
<li class="chapter" data-level="9.3.3" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-groups"><i class="fa fa-check"></i><b>9.3.3</b> Groups</a></li>
</ul></li>
<li class="chapter" data-level="9.4" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-gio"><i class="fa fa-check"></i><b>9.4</b> Crosstalk with Gio</a></li>
<li class="chapter" data-level="9.5" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-r"><i class="fa fa-check"></i><b>9.5</b> R code</a></li>
<li class="chapter" data-level="9.6" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-js"><i class="fa fa-check"></i><b>9.6</b> JavaScript Code</a><ul>
<li class="chapter" data-level="9.6.1" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-send-keys"><i class="fa fa-check"></i><b>9.6.1</b> Send Selected Keys</a></li>
<li class="chapter" data-level="9.6.2" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-set-keys"><i class="fa fa-check"></i><b>9.6.2</b> Set Selected Keys</a></li>
</ul></li>
<li class="chapter" data-level="9.7" data-path="linking-widgets.html"><a href="linking-widgets.html#linking-widgets-using"><i class="fa fa-check"></i><b>9.7</b> Using Crosstalk with Gio</a></li>
</ul></li>
<li class="chapter" data-level="10" data-path="widgets-final.html"><a href="widgets-final.html"><i class="fa fa-check"></i><b>10</b> Final Revisions</a><ul>
<li class="chapter" data-level="10.1" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-data"><i class="fa fa-check"></i><b>10.1</b> Htmlwidgets and Data</a></li>
<li class="chapter" data-level="10.2" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-options"><i class="fa fa-check"></i><b>10.2</b> Plethora of Options</a></li>
<li class="chapter" data-level="10.3" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-interface"><i class="fa fa-check"></i><b>10.3</b> Interface Design</a></li>
<li class="chapter" data-level="10.4" data-path="widgets-final.html"><a href="widgets-final.html#widgets-final-exercises"><i class="fa fa-check"></i><b>10.4</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>III Web Development with Shiny</b></span></li>
<li class="chapter" data-level="11" data-path="shiny-intro.html"><a href="shiny-intro.html"><i class="fa fa-check"></i><b>11</b> Bidirectional Communication</a><ul>
<li class="chapter" data-level="11.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-websocket"><i class="fa fa-check"></i><b>11.1</b> WebSocket an Shiny</a></li>
<li class="chapter" data-level="11.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-sessions"><i class="fa fa-check"></i><b>11.2</b> Sessions</a></li>
<li class="chapter" data-level="11.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-example"><i class="fa fa-check"></i><b>11.3</b> Alerts, an example</a><ul>
<li class="chapter" data-level="11.3.1" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-explore"><i class="fa fa-check"></i><b>11.3.1</b> Explore</a></li>
<li class="chapter" data-level="11.3.2" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-r-to-js"><i class="fa fa-check"></i><b>11.3.2</b> From R to JavaScript</a></li>
<li class="chapter" data-level="11.3.3" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-serialise"><i class="fa fa-check"></i><b>11.3.3</b> Serialisation</a></li>
<li class="chapter" data-level="11.3.4" data-path="shiny-intro.html"><a href="shiny-intro.html#shiny-intro-js2r"><i class="fa fa-check"></i><b>11.3.4</b> JavaScript to R</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="12" data-path="shiny-complete.html"><a href="shiny-complete.html"><i class="fa fa-check"></i><b>12</b> A Complete Integration</a><ul>
<li class="chapter" data-level="12.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-discover"><i class="fa fa-check"></i><b>12.1</b> Discover</a></li>
<li class="chapter" data-level="12.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-setup"><i class="fa fa-check"></i><b>12.2</b> Setup</a></li>
<li class="chapter" data-level="12.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-dependencies"><i class="fa fa-check"></i><b>12.3</b> Dependencies</a></li>
<li class="chapter" data-level="12.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-images"><i class="fa fa-check"></i><b>12.4</b> Static Files</a></li>
<li class="chapter" data-level="12.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-skeleton"><i class="fa fa-check"></i><b>12.5</b> Skeleton</a></li>
<li class="chapter" data-level="12.6" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-r2js"><i class="fa fa-check"></i><b>12.6</b> From R to JavaScript</a></li>
<li class="chapter" data-level="12.7" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-js2r"><i class="fa fa-check"></i><b>12.7</b> From JavaScript to R</a></li>
<li class="chapter" data-level="12.8" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-input-handler"><i class="fa fa-check"></i><b>12.8</b> Input handler</a></li>
<li class="chapter" data-level="12.9" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg"><i class="fa fa-check"></i><b>12.9</b> As a Package</a><ul>
<li class="chapter" data-level="12.9.1" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-deps"><i class="fa fa-check"></i><b>12.9.1</b> Dependencies</a></li>
<li class="chapter" data-level="12.9.2" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-trigger"><i class="fa fa-check"></i><b>12.9.2</b> Trigger classification</a></li>
<li class="chapter" data-level="12.9.3" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-js-code"><i class="fa fa-check"></i><b>12.9.3</b> JavaScript code</a></li>
<li class="chapter" data-level="12.9.4" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-input-handler"><i class="fa fa-check"></i><b>12.9.4</b> Input handler</a></li>
<li class="chapter" data-level="12.9.5" data-path="shiny-complete.html"><a href="shiny-complete.html#shiny-complete-pkg-test"><i class="fa fa-check"></i><b>12.9.5</b> Test</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="13" data-path="shiny-tips.html"><a href="shiny-tips.html"><i class="fa fa-check"></i><b>13</b> Tips and Tricks</a><ul>
<li class="chapter" data-level="13.1" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-events"><i class="fa fa-check"></i><b>13.1</b> Shiny Events</a></li>
<li class="chapter" data-level="13.2" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-table-btn"><i class="fa fa-check"></i><b>13.2</b> Table Buttons</a></li>
<li class="chapter" data-level="13.3" data-path="shiny-tips.html"><a href="shiny-tips.html#shiny-tips-jQuery"><i class="fa fa-check"></i><b>13.3</b> jQuery</a></li>
</ul></li>
<li class="chapter" data-level="14" data-path="shiny-output.html"><a href="shiny-output.html"><i class="fa fa-check"></i><b>14</b> Custom Outputs</a><ul>
<li class="chapter" data-level="14.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inner-workings"><i class="fa fa-check"></i><b>14.1</b> Inner-workings</a></li>
<li class="chapter" data-level="14.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-setup"><i class="fa fa-check"></i><b>14.2</b> Setup</a></li>
<li class="chapter" data-level="14.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-r-fun"><i class="fa fa-check"></i><b>14.3</b> Output R Function</a></li>
<li class="chapter" data-level="14.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-html"><i class="fa fa-check"></i><b>14.4</b> Generate Output HTML</a></li>
<li class="chapter" data-level="14.5" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-renderer"><i class="fa fa-check"></i><b>14.5</b> Output Renderer</a></li>
<li class="chapter" data-level="14.6" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-binding"><i class="fa fa-check"></i><b>14.6</b> JavaScript Output Binding</a><ul>
<li class="chapter" data-level="14.6.1" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-title"><i class="fa fa-check"></i><b>14.6.1</b> Boxxy Title</a></li>
<li class="chapter" data-level="14.6.2" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-value"><i class="fa fa-check"></i><b>14.6.2</b> Boxxy Value</a></li>
<li class="chapter" data-level="14.6.3" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-boxxy-bg-color"><i class="fa fa-check"></i><b>14.6.3</b> Boxxy Background Color</a></li>
<li class="chapter" data-level="14.6.4" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-register"><i class="fa fa-check"></i><b>14.6.4</b> Register the Output Binding</a></li>
</ul></li>
<li class="chapter" data-level="14.7" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-usage"><i class="fa fa-check"></i><b>14.7</b> Boxxy Usage</a></li>
<li class="chapter" data-level="14.8" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-inject"><i class="fa fa-check"></i><b>14.8</b> Injecting Dependencies</a></li>
<li class="chapter" data-level="14.9" data-path="shiny-output.html"><a href="shiny-output.html#shiny-output-preprocess"><i class="fa fa-check"></i><b>14.9</b> Preprocessing Custom Outputs</a></li>
</ul></li>
<li class="chapter" data-level="15" data-path="shiny-input.html"><a href="shiny-input.html"><i class="fa fa-check"></i><b>15</b> Custom Inputs</a><ul>
<li class="chapter" data-level="15.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-setup"><i class="fa fa-check"></i><b>15.1</b> Setup</a></li>
<li class="chapter" data-level="15.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-intro"><i class="fa fa-check"></i><b>15.2</b> Switch Input HTML and Style</a></li>
<li class="chapter" data-level="15.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-html"><i class="fa fa-check"></i><b>15.3</b> Generate Input HTML</a></li>
<li class="chapter" data-level="15.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-binding"><i class="fa fa-check"></i><b>15.4</b> JavaScript Input Binding</a><ul>
<li class="chapter" data-level="15.4.1" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-find"><i class="fa fa-check"></i><b>15.4.1</b> Find Inputs</a></li>
<li class="chapter" data-level="15.4.2" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-id"><i class="fa fa-check"></i><b>15.4.2</b> Get Input Id</a></li>
<li class="chapter" data-level="15.4.3" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-get-value"><i class="fa fa-check"></i><b>15.4.3</b> Get Input Value</a></li>
<li class="chapter" data-level="15.4.4" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-set-value"><i class="fa fa-check"></i><b>15.4.4</b> Set Input Value</a></li>
<li class="chapter" data-level="15.4.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-receive-msg"><i class="fa fa-check"></i><b>15.4.5</b> Receive Input Messages</a></li>
<li class="chapter" data-level="15.4.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-sub-unsub"><i class="fa fa-check"></i><b>15.4.6</b> Subscribe and Unsubscribe Inputs</a></li>
<li class="chapter" data-level="15.4.7" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-rate-policy"><i class="fa fa-check"></i><b>15.4.7</b> Input Rate Policy</a></li>
<li class="chapter" data-level="15.4.8" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-register"><i class="fa fa-check"></i><b>15.4.8</b> Registering the Input Binding</a></li>
</ul></li>
<li class="chapter" data-level="15.5" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-update"><i class="fa fa-check"></i><b>15.5</b> Update Input</a></li>
<li class="chapter" data-level="15.6" data-path="shiny-input.html"><a href="shiny-input.html#shiny-input-excercise"><i class="fa fa-check"></i><b>15.6</b> Exercise</a></li>
</ul></li>
<li class="chapter" data-level="16" data-path="shiny-cookies.html"><a href="shiny-cookies.html"><i class="fa fa-check"></i><b>16</b> Cookies</a><ul>
<li class="chapter" data-level="16.1" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-discover"><i class="fa fa-check"></i><b>16.1</b> Discover js-cookie</a></li>
<li class="chapter" data-level="16.2" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-setup"><i class="fa fa-check"></i><b>16.2</b> Setup Project</a></li>
<li class="chapter" data-level="16.3" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-javascript"><i class="fa fa-check"></i><b>16.3</b> JavaScript Cookies</a></li>
<li class="chapter" data-level="16.4" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-r-code"><i class="fa fa-check"></i><b>16.4</b> R Code</a></li>
<li class="chapter" data-level="16.5" data-path="shiny-cookies.html"><a href="shiny-cookies.html#shiny-cookies-exercises"><i class="fa fa-check"></i><b>16.5</b> Exercises</a></li>
</ul></li>
<li class="chapter" data-level="17" data-path="shiny-widgets.html"><a href="shiny-widgets.html"><i class="fa fa-check"></i><b>17</b> Widgets with Shiny</a><ul>
<li class="chapter" data-level="17.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-to-r"><i class="fa fa-check"></i><b>17.1</b> Widgets to R</a></li>
<li class="chapter" data-level="17.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handlers"><i class="fa fa-check"></i><b>17.2</b> Input Handlers for Widgets</a></li>
<li class="chapter" data-level="17.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-r-to-widgets"><i class="fa fa-check"></i><b>17.3</b> R to Widgets</a><ul>
<li class="chapter" data-level="17.3.1" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-send-data"><i class="fa fa-check"></i><b>17.3.1</b> Send Data from Widgets</a></li>
<li class="chapter" data-level="17.3.2" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-retrieve"><i class="fa fa-check"></i><b>17.3.2</b> Retrieve Widget Instance</a></li>
<li class="chapter" data-level="17.3.3" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-handle-data"><i class="fa fa-check"></i><b>17.3.3</b> Handle Data</a></li>
</ul></li>
<li class="chapter" data-level="17.4" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-proxy"><i class="fa fa-check"></i><b>17.4</b> Proxy Function</a></li>
<li class="chapter" data-level="17.5" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-clear-data"><i class="fa fa-check"></i><b>17.5</b> Clear Data</a></li>
<li class="chapter" data-level="17.6" data-path="shiny-widgets.html"><a href="shiny-widgets.html#shiny-widgets-update"><i class="fa fa-check"></i><b>17.6</b> Update the Widget</a></li>
</ul></li>
<li class="part"><span><b>IV JavaScript for Computations</b></span></li>
<li class="chapter" data-level="18" data-path="v8.html"><a href="v8.html"><i class="fa fa-check"></i><b>18</b> The V8 Engine</a><ul>
<li class="chapter" data-level="18.1" data-path="v8.html"><a href="v8.html#v8-installation"><i class="fa fa-check"></i><b>18.1</b> Installation</a></li>
<li class="chapter" data-level="18.2" data-path="v8.html"><a href="v8.html#v8-basics"><i class="fa fa-check"></i><b>18.2</b> Basics</a></li>
<li class="chapter" data-level="18.3" data-path="v8.html"><a href="v8.html#v8-external"><i class="fa fa-check"></i><b>18.3</b> External Libraries</a></li>
<li class="chapter" data-level="18.4" data-path="v8.html"><a href="v8.html#v8-npm"><i class="fa fa-check"></i><b>18.4</b> NPM Packages</a></li>
<li class="chapter" data-level="18.5" data-path="v8.html"><a href="v8.html#v8-pkg"><i class="fa fa-check"></i><b>18.5</b> Use in Packages</a></li>
</ul></li>
<li class="chapter" data-level="19" data-path="v8-ml.html"><a href="v8-ml.html"><i class="fa fa-check"></i><b>19</b> Machine Learning</a><ul>
<li class="chapter" data-level="19.1" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-dependency"><i class="fa fa-check"></i><b>19.1</b> Dependency</a></li>
<li class="chapter" data-level="19.2" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-regression"><i class="fa fa-check"></i><b>19.2</b> Simple Regression</a></li>
<li class="chapter" data-level="19.3" data-path="v8-ml.html"><a href="v8-ml.html#v8-ml-exercises"><i class="fa fa-check"></i><b>19.3</b> Exercises</a></li>
</ul></li>
<li class="part"><span><b>V Robust JavaScript</b></span></li>
<li class="chapter" data-level="20" data-path="webpack-intro.html"><a href="webpack-intro.html"><i class="fa fa-check"></i><b>20</b> Managing JavaScript</a><ul>
<li class="chapter" data-level="20.1" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-example"><i class="fa fa-check"></i><b>20.1</b> Example</a></li>
<li class="chapter" data-level="20.2" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-browser"><i class="fa fa-check"></i><b>20.2</b> Transpiling</a></li>
<li class="chapter" data-level="20.3" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-minification"><i class="fa fa-check"></i><b>20.3</b> Minification</a></li>
<li class="chapter" data-level="20.4" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-structure"><i class="fa fa-check"></i><b>20.4</b> Bundling and Modules</a></li>
<li class="chapter" data-level="20.5" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-decouple"><i class="fa fa-check"></i><b>20.5</b> Decoupling</a></li>
<li class="chapter" data-level="20.6" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-npm"><i class="fa fa-check"></i><b>20.6</b> NPM</a></li>
<li class="chapter" data-level="20.7" data-path="webpack-intro.html"><a href="webpack-intro.html#webpack-conclude"><i class="fa fa-check"></i><b>20.7</b> With R</a></li>
</ul></li>
<li class="chapter" data-level="21" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html"><i class="fa fa-check"></i><b>21</b> Discover Webpack and NPM</a><ul>
<li class="chapter" data-level="21.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install"><i class="fa fa-check"></i><b>21.1</b> Installation</a><ul>
<li class="chapter" data-level="21.1.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-mac"><i class="fa fa-check"></i><b>21.1.1</b> Mac OS</a></li>
<li class="chapter" data-level="21.1.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-ubuntu"><i class="fa fa-check"></i><b>21.1.2</b> Ubuntu</a></li>
<li class="chapter" data-level="21.1.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-windows"><i class="fa fa-check"></i><b>21.1.3</b> Windows</a></li>
<li class="chapter" data-level="21.1.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-other"><i class="fa fa-check"></i><b>21.1.4</b> Other</a></li>
</ul></li>
<li class="chapter" data-level="21.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-setup"><i class="fa fa-check"></i><b>21.2</b> Set Up the App</a></li>
<li class="chapter" data-level="21.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-init-npm"><i class="fa fa-check"></i><b>21.3</b> Initialise NPM</a></li>
<li class="chapter" data-level="21.4" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-install-pkgs"><i class="fa fa-check"></i><b>21.4</b> Installing NPM Packages</a></li>
<li class="chapter" data-level="21.5" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-entry-points"><i class="fa fa-check"></i><b>21.5</b> Entry Point and Output</a></li>
<li class="chapter" data-level="21.6" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-conf"><i class="fa fa-check"></i><b>21.6</b> Configuration File</a></li>
<li class="chapter" data-level="21.7" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-npm-scripts"><i class="fa fa-check"></i><b>21.7</b> NPM scripts</a></li>
<li class="chapter" data-level="21.8" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-webpack-mode"><i class="fa fa-check"></i><b>21.8</b> Source maps</a></li>
<li class="chapter" data-level="21.9" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-bundle"><i class="fa fa-check"></i><b>21.9</b> Bundle</a></li>
<li class="chapter" data-level="21.10" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-internal-dependencies"><i class="fa fa-check"></i><b>21.10</b> Internal Dependencies</a></li>
<li class="chapter" data-level="21.11" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-external-dependencies"><i class="fa fa-check"></i><b>21.11</b> External Dependencies</a></li>
<li class="chapter" data-level="21.12" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export"><i class="fa fa-check"></i><b>21.12</b> Import and Export</a><ul>
<li class="chapter" data-level="21.12.1" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-named"><i class="fa fa-check"></i><b>21.12.1</b> Named</a></li>
<li class="chapter" data-level="21.12.2" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-default"><i class="fa fa-check"></i><b>21.12.2</b> Default</a></li>
<li class="chapter" data-level="21.12.3" data-path="webpack-intro-discover.html"><a href="webpack-intro-discover.html#webpack-intro-import-export-wrap-up"><i class="fa fa-check"></i><b>21.12.3</b> Wrap-up</a></li>
</ul></li>
</ul></li>
<li class="chapter" data-level="22" data-path="packer-overview.html"><a href="packer-overview.html"><i class="fa fa-check"></i><b>22</b> Webpack with R</a><ul>
<li class="chapter" data-level="22.1" data-path="packer-overview.html"><a href="packer-overview.html#packer-principles"><i class="fa fa-check"></i><b>22.1</b> Principles of packer</a></li>
<li class="chapter" data-level="22.2" data-path="packer-overview.html"><a href="packer-overview.html#packer-scaffolds"><i class="fa fa-check"></i><b>22.2</b> Scaffolds</a></li>
<li class="chapter" data-level="22.3" data-path="packer-overview.html"><a href="packer-overview.html#packer-inputs"><i class="fa fa-check"></i><b>22.3</b> Inputs</a></li>
<li class="chapter" data-level="22.4" data-path="packer-overview.html"><a href="packer-overview.html#packer-r-file"><i class="fa fa-check"></i><b>22.4</b> R file</a></li>
<li class="chapter" data-level="22.5" data-path="packer-overview.html"><a href="packer-overview.html#packer-js-files"><i class="fa fa-check"></i><b>22.5</b> JavaScript Files</a></li>
<li class="chapter" data-level="22.6" data-path="packer-overview.html"><a href="packer-overview.html#packer-bundle"><i class="fa fa-check"></i><b>22.6</b> Bundle</a></li>
</ul></li>
<li class="chapter" data-level="23" data-path="packer-adv.html"><a href="packer-adv.html"><i class="fa fa-check"></i><b>23</b> Webpack Advanced</a><ul>
<li class="chapter" data-level="23.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-widgets"><i class="fa fa-check"></i><b>23.1</b> Widgets</a></li>
<li class="chapter" data-level="23.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue"><i class="fa fa-check"></i><b>23.2</b> Shiny with Vue and Bootstrap 4</a><ul>
<li class="chapter" data-level="23.2.1" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-setup"><i class="fa fa-check"></i><b>23.2.1</b> Setup</a></li>
<li class="chapter" data-level="23.2.2" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-bs4"><i class="fa fa-check"></i><b>23.2.2</b> Bootstrap 4 Installation</a></li>
<li class="chapter" data-level="23.2.3" data-path="packer-adv.html"><a href="packer-adv.html#packer-adv-shiny-vue-code"><i class="fa fa-check"></i><b>23.2.3</b> Vue Code</a></li>
</ul></li>
</ul></li>
<li class="part"><span><b>VI Closing Remarks</b></span></li>
<li class="chapter" data-level="24" data-path="conclusion.html"><a href="conclusion.html"><i class="fa fa-check"></i><b>24</b> Conclusion</a><ul>
<li class="chapter" data-level="24.1" data-path="conclusion.html"><a href="conclusion.html#conclusion-performances"><i class="fa fa-check"></i><b>24.1</b> Performances</a></li>
<li class="chapter" data-level="24.2" data-path="conclusion.html"><a href="conclusion.html#conclusion-trial-and-error"><i class="fa fa-check"></i><b>24.2</b> Trial and Error</a></li>
<li class="chapter" data-level="24.3" data-path="conclusion.html"><a href="conclusion.html#conclusion-ux"><i class="fa fa-check"></i><b>24.3</b> Functionality and UX</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="references.html"><a href="references.html"><i class="fa fa-check"></i>References</a></li>
</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">JavaScript for R</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="prerequisites" class="section level1">
<h1><span class="header-section-number">Chapter 2</span> Prerequisites</h1>
<p>The code contained in the following pages is approachable to readers with basic knowledge of R. Still, familiarity with package development using <a href="https://devtools.r-lib.org/">devtools</a> <span class="citation">(Wickham, Hester, and Chang <a href="#ref-R-devtools">2020</a>)</span>, the <a href="https://shiny.rstudio.com/">Shiny</a> framework <span class="citation">(Chang, Cheng, Allaire, et al. <a href="#ref-R-shiny">2021</a>)</span>, the JSON data format, and JavaScript are essential.</p>
<p>The reason for the former is that some of the ways one builds integrations with JavaScript naturally take the form of R packages. Also, R packages make sharing code, datasets, and anything else R-related extremely convenient, they come with a relatively strict structure, the ability to run unit tests, and much more. These have thus become a core feature of the R ecosystem and, therefore, are used extensively in the book as we create several packages. Therefore, the following section runs over the essentials of building a package to ensure everyone can keep up.</p>
<p>Then we briefly go through the JSON data format as it will be used to a great extent to communicate between R and JavaScript. Since both Shiny and JavaScript run in the browser they make for axiomatic companions; we’ll therefore use Shiny extensively. Finally, there is an obligatory short introduction to JavaScript.</p>
<p>It is highly recommended to use the freely available <a href="https://rstudio.com/products/rstudio/">RStudio IDE</a> to follow along as it makes a lot of things easier down the line.</p>
<div id="basics-package-dev" class="section level2">
<h2><span class="header-section-number">2.1</span> R Package Development</h2>
<p>Developing R packages used to be notoriously tricky, but things have considerably changed in recent years, namely thanks to the devtools <span class="citation">(Wickham, Hester, and Chang <a href="#ref-R-devtools">2020</a>)</span>, roxygen2 <span class="citation">(Wickham, Danenberg, et al. <a href="#ref-R-roxygen2">2020</a>)</span>, and more recent <a href="https://usethis.r-lib.org/">usethis</a> <span class="citation">(Wickham and Bryan <a href="#ref-R-usethis">2021</a>)</span> packages. Devtools is short for “developer tools,” it is specifically designed to help creating packages; setting up tests, running checks, building and installing packages, etc. The second provides an all too convenient way to generate the documentation of packages, and usethis, more broadly, helps setting up projects, and automating repetitive tasks. Here, we only skim over the fundamentals, there is an entire book by Hadley Wickham called <a href="http://r-pkgs.had.co.nz/"><em>R Packages</em></a> solely dedicated to the topic.</p>
<p>Start by installing those packages from CRAN the roxygen2 package does not need to be explicitly installed as it is a dependency of devtools.</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" title="1"><span class="kw">install.packages</span>(<span class="kw">c</span>(<span class="st">&quot;devtools&quot;</span>, <span class="st">&quot;usethis&quot;</span>))</a></code></pre></div>
<div id="basics-create-pkg" class="section level3">
<h3><span class="header-section-number">2.1.1</span> Creating a Package</h3>
<p>There are multiple ways to create a package. One could manually create every file, use the RStudio IDE, or create it from the R console with the usethis <span class="citation">(Wickham and Bryan <a href="#ref-R-usethis">2021</a>)</span> package.</p>
<p>From the RStudio IDE go to <code>File &gt; New Project &gt; New Directory &gt; R Package</code> then select “R package” and fill in the small form, namely name the package and specify the directory where it should be created, as shown in Figure <a href="prerequisites.html#fig:rstudio-create-package">2.1</a>.</p>
<div class="figure" style="text-align: center"><span id="fig:rstudio-create-package"></span>
<img src="images/rstudio-create-package.png" alt="Package creation wizard" width="100%" />
<p class="caption">
FIGURE 2.1: Package creation wizard
</p>
</div>
<p>But it could be argued that it’s actually more accessible from the R console with the usethis package. The <code>create_package</code> function takes as first argument the path to create the package. If you run it from RStudio a new project window should open.</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb8-1" title="1"><span class="co"># creates a package named &quot;test&quot; in root of directory.</span></a>
<a class="sourceLine" id="cb8-2" title="2">usethis<span class="op">::</span><span class="kw">create_package</span>(<span class="st">&quot;test&quot;</span>)</a></code></pre></div>
<pre><code>✔ Creating &#39;test/&#39;
✔ Setting active project to &#39;/Packages/test&#39;
✔ Creating &#39;R/&#39;
✔ Writing &#39;DESCRIPTION&#39;
Package: test
Title: What the Package Does (One Line, Title Case)
Version: 0.0.0.9000
Authors@R (parsed):
    * First Last &lt;first.last@example.com&gt; [aut, cre] (YOUR-ORCID-ID)
Description: What the package does (one paragraph).
License: `use_mit_license()`, `use_gpl3_license()` or friends to
    pick a license
Encoding: UTF-8
LazyData: true
Roxygen: list(markdown = TRUE)
RoxygenNote: 7.1.1.9000
✔ Writing &#39;NAMESPACE&#39;
✔ Changing working directory to &#39;test/&#39;
✔ Setting active project to &#39;&lt;no active project&gt;&#39;</code></pre>
</div>
<div id="basics-metadata" class="section level3">
<h3><span class="header-section-number">2.1.2</span> Metadata</h3>
<p>Every R package includes a <code>DESCRIPTION</code> file which includes metadata about the package. This includes a range of things like the license defining who can use the package, the name of the package, its dependencies, and more. Below is the default created by the usethis package with <code>usethis::create_package("test")</code>.</p>
<pre><code>Package: test
Title: What the Package Does (One Line, Title Case)
Version: 0.0.0.9000
Authors@R: 
    person(given = &quot;First&quot;,
           family = &quot;Last&quot;,
           role = c(&quot;aut&quot;, &quot;cre&quot;),
           email = &quot;first.last@example.com&quot;,
           comment = c(ORCID = &quot;YOUR-ORCID-ID&quot;))
Description: What the package does (one paragraph).
License: `use_mit_license()`, `use_gpl3_license()` or friends to
    pick a license
Encoding: UTF-8
LazyData: true
Roxygen: list(markdown = TRUE)
RoxygenNote: 7.1.1.9000</code></pre>
<p>Much of this is outside the scope of the book. However, it is good to grasp how dependencies are specified. As packages are generally intended for sharing with others, it is vital to ensure users of the package meet the dependencies; otherwise, the package may not work in places. For instance, were we to create a package that relies on one or more functions from the stringr <span class="citation">(Wickham <a href="#ref-R-stringr">2019</a>)</span> package we would need to ensure people who install the package have it installed on their machine or those functions will not work.</p>
<div class="sourceCode" id="cb11"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb11-1" title="1"><span class="co"># R/string.R</span></a>
<a class="sourceLine" id="cb11-2" title="2">string_length &lt;-<span class="st"> </span><span class="cf">function</span>(string) {</a>
<a class="sourceLine" id="cb11-3" title="3">  stringr<span class="op">::</span><span class="kw">str_length</span>(string)</a>
<a class="sourceLine" id="cb11-4" title="4">}</a></code></pre></div>
<div class="rmdnote">
<p>
Note that the function is preceded by its namespace with <code>::</code> (more on this later).
</p>
</div>
<p>The <code>DESCRIPTION</code> file does this; it will make sure that the dependencies of the package are met by users who install it. We can specify such dependencies under <code>Imports</code>, where we can list packages required separated by a comma.</p>
<pre><code>Imports:
  stringr,
  dplyr</code></pre>
<p>Then again, the usethis package also allows doing so consistently from the R console, which is great to avoid mishandling the <code>DESCRIPTION</code> file.</p>
<div class="sourceCode" id="cb13"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb13-1" title="1"><span class="co"># add stringr under Imports</span></a>
<a class="sourceLine" id="cb13-2" title="2">usethis<span class="op">::</span><span class="kw">use_package</span>(<span class="st">&#39;stringr&#39;</span>)</a></code></pre></div>
<p>One can also specify another type of dependencies under <code>Suggests</code>, other packages that enhance the package but are not required to run it. These, unlike package under <code>Imports</code>, are not automatically installed if missing, which can greatly reduce overhead.</p>
</div>
<div id="basics-r-code" class="section level3">
<h3><span class="header-section-number">2.1.3</span> R code</h3>
<p>An R package must follow a strict structure. R code must be placed in an <code>R/</code> directory so one should only find <code>.R</code> files in that directory. These files generally contain functions, methods, and R objects.</p>
<div class="sourceCode" id="cb14"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb14-1" title="1"><span class="co"># R/add.R</span></a>
<a class="sourceLine" id="cb14-2" title="2">string_length &lt;-<span class="st"> </span><span class="cf">function</span>(strings) {</a>
<a class="sourceLine" id="cb14-3" title="3">  stringr<span class="op">::</span><span class="kw">str_length</span>(strings)</a>
<a class="sourceLine" id="cb14-4" title="4">}</a></code></pre></div>
</div>
<div id="basics-documentation" class="section level3">
<h3><span class="header-section-number">2.1.4</span> Documentation</h3>
<p>Documenting packages used to be notoriously complicated, but thanks to the package roxygen2 that is no longer the case. The documentation of functions of the package (accessible with <code>?</code>) and datasets that comprise the package reside in separate files sitting in the <code>man/</code> directory. These are <code>.Rd</code> files that use a custom syntax resembling LaTex. The roxygen package eases the creation of these files by turning special comments and tags in <code>.R</code> files into said <code>.Rd</code> files.</p>
<p>Special comments are a standard R comment <code>#</code> followed by an apostrophe <code>'</code>. The first sentence of the documentation is the title of the documentation file while the second is the description.</p>
<div class="sourceCode" id="cb15"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb15-1" title="1"><span class="co">#&#39; Strings Length</span></a>
<a class="sourceLine" id="cb15-2" title="2"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb15-3" title="3"><span class="co">#&#39; Returns the number of characters in strings. </span></a>
<a class="sourceLine" id="cb15-4" title="4">string_length &lt;-<span class="st"> </span><span class="cf">function</span>(strings) {</a>
<a class="sourceLine" id="cb15-5" title="5">  stringr<span class="op">::</span><span class="kw">str_length</span>(strings)</a>
<a class="sourceLine" id="cb15-6" title="6">}</a></code></pre></div>
<p>There are a plethora of roxygen2 tags to further document different sections. Below we use two different tags to document the parameters and give an example.</p>
<div class="sourceCode" id="cb16"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb16-1" title="1"><span class="co">#&#39; Strings Length</span></a>
<a class="sourceLine" id="cb16-2" title="2"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb16-3" title="3"><span class="co">#&#39; Returns the number of characters in strings. </span></a>
<a class="sourceLine" id="cb16-4" title="4"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb16-5" title="5"><span class="co">#&#39; @param strings A vector of character strings.</span></a>
<a class="sourceLine" id="cb16-6" title="6"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb16-7" title="7"><span class="co">#&#39; @example string_length(c(&quot;hello&quot;, &quot;world&quot;))</span></a>
<a class="sourceLine" id="cb16-8" title="8">string_length &lt;-<span class="st"> </span><span class="cf">function</span>(strings) {</a>
<a class="sourceLine" id="cb16-9" title="9">  stringr<span class="op">::</span><span class="kw">str_length</span>(strings)</a>
<a class="sourceLine" id="cb16-10" title="10">}</a></code></pre></div>
<p>As well as generating documentation, the roxygen2 package also allows populating the <code>NAMESPACE</code> file. This is an extensive and often confusing topic, but for this book, we’ll be content with the following: the <code>NAMESPACE</code> includes functions that are <em>imported</em> and <em>exported</em> by the package.</p>
<p>By default, functions that are present in the R files in the <code>R/</code> directory are not exported: they are not accessible outside the package. Therefore the <code>string_length</code> function defined previously will not be made available to users of the package, only other functions within the package will be able to call it. To export it we can use the <code>@export</code> tag. This will place the function as exported in the <code>NAMESPACE</code> file.</p>
<div class="sourceCode" id="cb17"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb17-1" title="1"><span class="co">#&#39; Strings Length</span></a>
<a class="sourceLine" id="cb17-2" title="2"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb17-3" title="3"><span class="co">#&#39; Returns the number of characters in strings. </span></a>
<a class="sourceLine" id="cb17-4" title="4"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb17-5" title="5"><span class="co">#&#39; @param strings A vector of character strings.</span></a>
<a class="sourceLine" id="cb17-6" title="6"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb17-7" title="7"><span class="co">#&#39; @example string_length(c(&quot;hello&quot;, &quot;world&quot;))</span></a>
<a class="sourceLine" id="cb17-8" title="8"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb17-9" title="9"><span class="co">#&#39; @export</span></a>
<a class="sourceLine" id="cb17-10" title="10">string_length &lt;-<span class="st"> </span><span class="cf">function</span>(strings) {</a>
<a class="sourceLine" id="cb17-11" title="11">  stringr<span class="op">::</span><span class="kw">str_length</span>(strings)</a>
<a class="sourceLine" id="cb17-12" title="12">}</a></code></pre></div>
<p>There are two ways to use external functions (functions from other R packages), as done thus far in the <code>string_length</code> function by using the namespace (package name) to call the function: <code>stringr::str_length</code>. Or by importing the function needed using a roxygen2 tag thereby removing the need for using the namespace.</p>
<div class="sourceCode" id="cb18"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb18-1" title="1"><span class="co">#&#39; Strings Length</span></a>
<a class="sourceLine" id="cb18-2" title="2"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb18-3" title="3"><span class="co">#&#39; Returns the number of characters in strings. </span></a>
<a class="sourceLine" id="cb18-4" title="4"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb18-5" title="5"><span class="co">#&#39; @param strings A vector of character strings.</span></a>
<a class="sourceLine" id="cb18-6" title="6"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb18-7" title="7"><span class="co">#&#39; @example string_length(c(&quot;hello&quot;, &quot;world&quot;))</span></a>
<a class="sourceLine" id="cb18-8" title="8"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb18-9" title="9"><span class="co">#&#39; @importFrom stringr str_length</span></a>
<a class="sourceLine" id="cb18-10" title="10"><span class="co">#&#39; </span></a>
<a class="sourceLine" id="cb18-11" title="11"><span class="co">#&#39; @export</span></a>
<a class="sourceLine" id="cb18-12" title="12">string_length &lt;-<span class="st"> </span><span class="cf">function</span>(strings) {</a>
<a class="sourceLine" id="cb18-13" title="13">  <span class="kw">str_length</span>(strings) <span class="co"># namespace removed</span></a>
<a class="sourceLine" id="cb18-14" title="14">}</a></code></pre></div>
<p>Above we import the function <code>str_length</code> from the <code>stringr</code> package using the <code>importFrom</code> roxygen2 tag. The first term following the tag is the name of the package wherefrom to import the functions, and the following terms are the name of the functions separated by spaces so one can import multiple functions from the same package with, e.g.: <code>@importFrom stringr str_length str_to_upper</code>. If the package imports many functions from a single package one might also consider importing the package in its entirety with, e.g.: <code>@import stringr</code>.</p>
<p>Finally, one can actually generate the <code>.Rd</code> documentation files and populate the <code>NAMESPACE</code> with either the <code>devtools::document()</code> function or <code>roxygen2::roxygenise()</code>.</p>
<div class="rmdnote">
<p>
Remember to run <code>devtools::document()</code> after changing roxygen2 tags otherwise changes are not actually reflected in the <code>NAMESPACE</code> and documentation.
</p>
</div>
</div>
<div id="basics-installed-files" class="section level3">
<h3><span class="header-section-number">2.1.5</span> Installed files</h3>
<p>Here we tackle the topic of installed files as it will be relevant to much of what the book covers. Installed files are files that are downloaded and copied as-is when users install the package. This directory will therefore come in very handy to store JavaScript files that package will require. These files can be accessed with the <code>system.file</code> function, which will look for a file from the root of the <code>inst/</code> directory.</p>
<div class="sourceCode" id="cb19"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb19-1" title="1"><span class="co"># return path to `inst/dependency.js` in `myPackage`</span></a>
<a class="sourceLine" id="cb19-2" title="2">path &lt;-<span class="st"> </span><span class="kw">system.file</span>(<span class="st">&quot;dependency.js&quot;</span>, <span class="dt">package =</span> <span class="st">&quot;myPackage&quot;</span>)</a></code></pre></div>
</div>
<div id="basics-build-load-install" class="section level3">
<h3><span class="header-section-number">2.1.6</span> Build, load, and install</h3>
<p>Finally, after generating the documentation of the package with <code>devtools::document()</code> one can install it locally with <code>devtools::install()</code>. This, however, can take a few seconds too many whilst developing a package as one iterates and regularly tries things; <code>devtools::load_all()</code> will not install the package but load all the functions and object in the global environment to let you run them.</p>
<p>There is some cyclical nature to developing packages:</p>
<ol style="list-style-type: decimal">
<li>Write some code</li>
<li>Run <code>devtools::document()</code> (if documentation tags have changed)</li>
<li>Run <code>devtools::load_all()</code></li>
<li>Repeat</li>
</ol>
<p>Note whilst this short guide will help you develop packages good enough for your system it will certainly not pass CRAN checks.</p>
</div>
</div>
<div id="basics-json" class="section level2">
<h2><span class="header-section-number">2.2</span> JSON</h2>
<p>JSON (JavaScript Object Notation) is a prevalent data <em>interchange</em> format with which we will work extensively throughout this book; it is thus crucial that we have a good understanding of it before we plunge into the nitty-gritty. As one might foresee, if we want two languages to work together, we must have a data format that can be understood by both—JSON lets us harmoniously pass data from one to the other. While it is natively supported in JavaScript, it can be graciously handled in R with the <a href="https://CRAN.R-project.org/package=jsonlite">jsonlite package</a> <span class="citation">(Ooms <a href="#ref-R-jsonlite">2020</a>)</span> it is the serialiser used internally by all R packages that we explore in this book.</p>
<div class="rmdnote">
<p>
“To serialise” is just jargon for converting data to JSON.
</p>
</div>
<div id="serialising" class="section level3">
<h3><span class="header-section-number">2.2.1</span> Serialising</h3>
<p>JSON is to all intents and purposes the equivalent of lists in R; a flexible data format that can store pretty much anything–except data.frames, a structure that does not exist in JavaScript. Below we create a nested list and convert it to JSON with the help of jsonlite. We set <code>pretty</code> to <code>TRUE</code> to add indentation for cleaner printing, but this is an argument you should omit when writing production code; it will reduce the file size (fewer spaces = smaller file size).</p>
<div class="sourceCode" id="cb20"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb20-1" title="1"><span class="co"># install.packages(&quot;jsonlite&quot;)</span></a>
<a class="sourceLine" id="cb20-2" title="2"><span class="kw">library</span>(jsonlite)</a>
<a class="sourceLine" id="cb20-3" title="3"></a>
<a class="sourceLine" id="cb20-4" title="4">lst &lt;-<span class="st"> </span><span class="kw">list</span>(</a>
<a class="sourceLine" id="cb20-5" title="5">  <span class="dt">a =</span> <span class="dv">1</span>,</a>
<a class="sourceLine" id="cb20-6" title="6">  <span class="dt">b =</span> <span class="kw">list</span>(</a>
<a class="sourceLine" id="cb20-7" title="7">    <span class="dt">c =</span> <span class="kw">c</span>(<span class="st">&quot;A&quot;</span>, <span class="st">&quot;B&quot;</span>)</a>
<a class="sourceLine" id="cb20-8" title="8">  ),</a>
<a class="sourceLine" id="cb20-9" title="9">  <span class="dt">d =</span> <span class="dv">1</span><span class="op">:</span><span class="dv">5</span></a>
<a class="sourceLine" id="cb20-10" title="10">)</a>
<a class="sourceLine" id="cb20-11" title="11"></a>
<a class="sourceLine" id="cb20-12" title="12"><span class="kw">toJSON</span>(lst, <span class="dt">pretty =</span> <span class="ot">TRUE</span>)</a>
<a class="sourceLine" id="cb20-13" title="13"><span class="co">#&gt; {</span></a>
<a class="sourceLine" id="cb20-14" title="14"><span class="co">#&gt;   &quot;a&quot;: [1],</span></a>
<a class="sourceLine" id="cb20-15" title="15"><span class="co">#&gt;   &quot;b&quot;: {</span></a>
<a class="sourceLine" id="cb20-16" title="16"><span class="co">#&gt;     &quot;c&quot;: [&quot;A&quot;, &quot;B&quot;]</span></a>
<a class="sourceLine" id="cb20-17" title="17"><span class="co">#&gt;   },</span></a>
<a class="sourceLine" id="cb20-18" title="18"><span class="co">#&gt;   &quot;d&quot;: [1, 2, 3, 4, 5]</span></a>
<a class="sourceLine" id="cb20-19" title="19"><span class="co">#&gt; }</span></a></code></pre></div>
<p>Looking closely at the list and JSON output above, one quickly sees the resemblance. Something seems odd though: the first value in the list (<code>a = 1</code>) was serialised to an array (vector) of length one (<code>"a": [1]</code>), where one would probably expect an integer instead, <code>1</code> not <code>[1]</code>. This is not a mistake; we often forget that there are no scalar types in R and that <code>a</code> is, in fact, a vector as we can observe below.</p>
<div class="sourceCode" id="cb21"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb21-1" title="1">x &lt;-<span class="st"> </span><span class="dv">1</span></a>
<a class="sourceLine" id="cb21-2" title="2"><span class="kw">length</span>(x)</a>
<a class="sourceLine" id="cb21-3" title="3"><span class="co">#&gt; [1] 1</span></a>
<a class="sourceLine" id="cb21-4" title="4"><span class="kw">is.vector</span>(x)</a>
<a class="sourceLine" id="cb21-5" title="5"><span class="co">#&gt; [1] TRUE</span></a></code></pre></div>
<p>JavaScript, on the other hand, does have scalar types; more often than not we will want to convert the vectors of length one to scalar types rather than arrays of length one. To do so we need to use the <code>auto_unbox</code> argument in <code>jsonlite::toJSON</code>; we’ll do this most of the time we have to convert data to JSON.</p>
<div class="sourceCode" id="cb22"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb22-1" title="1"><span class="kw">toJSON</span>(lst, <span class="dt">pretty =</span> <span class="ot">TRUE</span>, <span class="dt">auto_unbox =</span> <span class="ot">TRUE</span>)</a>
<a class="sourceLine" id="cb22-2" title="2"><span class="co">#&gt; {</span></a>
<a class="sourceLine" id="cb22-3" title="3"><span class="co">#&gt;   &quot;a&quot;: 1,</span></a>
<a class="sourceLine" id="cb22-4" title="4"><span class="co">#&gt;   &quot;b&quot;: {</span></a>
<a class="sourceLine" id="cb22-5" title="5"><span class="co">#&gt;     &quot;c&quot;: [&quot;A&quot;, &quot;B&quot;]</span></a>
<a class="sourceLine" id="cb22-6" title="6"><span class="co">#&gt;   },</span></a>
<a class="sourceLine" id="cb22-7" title="7"><span class="co">#&gt;   &quot;d&quot;: [1, 2, 3, 4, 5]</span></a>
<a class="sourceLine" id="cb22-8" title="8"><span class="co">#&gt; }</span></a></code></pre></div>
<p>As demonstrated above the vector of length one was “unboxed” into an integer; with <code>auto_unbox</code> set to <code>TRUE</code>, jsonlite will properly convert such vectors into their appropriate type integer, numeric, boolean, etc. Note that this only applies to vectors lists of length one will be serialised to arrays of length one even with <code>auto_unbox</code> turned on: <code>list("hello")</code> will always be converted to <code>["hello"]</code>.</p>
</div>
<div id="basics-tabular" class="section level3">
<h3><span class="header-section-number">2.2.2</span> Tabular Data</h3>
<p>If JSON is more or less the equivalent of lists in R one might wonder how jsonlite handles dataframes since they do not exist in JavaScript.</p>
<div class="sourceCode" id="cb23"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb23-1" title="1"><span class="co"># subset of built-in dataset</span></a>
<a class="sourceLine" id="cb23-2" title="2">df &lt;-<span class="st"> </span>cars[<span class="dv">1</span><span class="op">:</span><span class="dv">2</span>, ]</a>
<a class="sourceLine" id="cb23-3" title="3"></a>
<a class="sourceLine" id="cb23-4" title="4"><span class="kw">toJSON</span>(df, <span class="dt">pretty =</span> <span class="ot">TRUE</span>)</a>
<a class="sourceLine" id="cb23-5" title="5"><span class="co">#&gt; [</span></a>
<a class="sourceLine" id="cb23-6" title="6"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb23-7" title="7"><span class="co">#&gt;     &quot;speed&quot;: 4,</span></a>
<a class="sourceLine" id="cb23-8" title="8"><span class="co">#&gt;     &quot;dist&quot;: 2</span></a>
<a class="sourceLine" id="cb23-9" title="9"><span class="co">#&gt;   },</span></a>
<a class="sourceLine" id="cb23-10" title="10"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb23-11" title="11"><span class="co">#&gt;     &quot;speed&quot;: 4,</span></a>
<a class="sourceLine" id="cb23-12" title="12"><span class="co">#&gt;     &quot;dist&quot;: 10</span></a>
<a class="sourceLine" id="cb23-13" title="13"><span class="co">#&gt;   }</span></a>
<a class="sourceLine" id="cb23-14" title="14"><span class="co">#&gt; ]</span></a></code></pre></div>
<p>What jsonlite does internally is essentially turn the data.frame into a list <em>row-wise</em> to produce a sub-list for every row then it serialises to JSON. This is generally how rectangular data is represented in lists. For instance, <code>purrr::transpose</code> does the same. Another great example is to use <code>console.table</code> in the JavaScript console (more on that later) to display the table JSON as a table (see Figure <a href="prerequisites.html#fig:console-table">2.2</a>).</p>
<div class="figure" style="text-align: center"><span id="fig:console-table"></span>
<img src="images/console-table.png" alt="console.table output" width="100%" />
<p class="caption">
FIGURE 2.2: console.table output
</p>
</div>
<p>We can reproduce this with the snippet below; we remove row names and use apply to turn every row into a list.</p>
<div class="sourceCode" id="cb24"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb24-1" title="1"><span class="kw">row.names</span>(df) &lt;-<span class="st"> </span><span class="ot">NULL</span></a>
<a class="sourceLine" id="cb24-2" title="2">df_list &lt;-<span class="st"> </span><span class="kw">apply</span>(df, <span class="dv">1</span>, as.list)</a>
<a class="sourceLine" id="cb24-3" title="3"></a>
<a class="sourceLine" id="cb24-4" title="4"><span class="kw">toJSON</span>(df_list, <span class="dt">pretty =</span> <span class="ot">TRUE</span>, <span class="dt">auto_unbox =</span> <span class="ot">TRUE</span>)</a>
<a class="sourceLine" id="cb24-5" title="5"><span class="co">#&gt; [</span></a>
<a class="sourceLine" id="cb24-6" title="6"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb24-7" title="7"><span class="co">#&gt;     &quot;speed&quot;: 4,</span></a>
<a class="sourceLine" id="cb24-8" title="8"><span class="co">#&gt;     &quot;dist&quot;: 2</span></a>
<a class="sourceLine" id="cb24-9" title="9"><span class="co">#&gt;   },</span></a>
<a class="sourceLine" id="cb24-10" title="10"><span class="co">#&gt;   {</span></a>
<a class="sourceLine" id="cb24-11" title="11"><span class="co">#&gt;     &quot;speed&quot;: 4,</span></a>
<a class="sourceLine" id="cb24-12" title="12"><span class="co">#&gt;     &quot;dist&quot;: 10</span></a>
<a class="sourceLine" id="cb24-13" title="13"><span class="co">#&gt;   }</span></a>
<a class="sourceLine" id="cb24-14" title="14"><span class="co">#&gt; ]</span></a></code></pre></div>
<p>Jsonlite of course also enables reading data from JSON into R with the function <code>fromJSON</code>.</p>
<div class="sourceCode" id="cb25"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb25-1" title="1">json &lt;-<span class="st"> </span><span class="kw">toJSON</span>(df) <span class="co"># convert to JSON</span></a>
<a class="sourceLine" id="cb25-2" title="2"><span class="kw">fromJSON</span>(json) <span class="co"># read from JSON</span></a>
<a class="sourceLine" id="cb25-3" title="3"><span class="co">#&gt;   speed dist</span></a>
<a class="sourceLine" id="cb25-4" title="4"><span class="co">#&gt; 1     4    2</span></a>
<a class="sourceLine" id="cb25-5" title="5"><span class="co">#&gt; 2     4   10</span></a></code></pre></div>
<p>It’s important to note that jsonlite did the conversion back to a data frame. Therefore the code below also returns a data frame even though the object we initially converted to JSON is a list.</p>
<div class="sourceCode" id="cb26"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb26-1" title="1"><span class="kw">class</span>(df_list)</a>
<a class="sourceLine" id="cb26-2" title="2"><span class="co">#&gt; [1] &quot;list&quot;</span></a>
<a class="sourceLine" id="cb26-3" title="3">json &lt;-<span class="st"> </span><span class="kw">toJSON</span>(df_list)</a>
<a class="sourceLine" id="cb26-4" title="4"><span class="kw">fromJSON</span>(json)</a>
<a class="sourceLine" id="cb26-5" title="5"><span class="co">#&gt;   speed dist</span></a>
<a class="sourceLine" id="cb26-6" title="6"><span class="co">#&gt; 1     4    2</span></a>
<a class="sourceLine" id="cb26-7" title="7"><span class="co">#&gt; 2     4   10</span></a></code></pre></div>
<p>Jsonlite provides many more options and functions that will let you tune how JSON data is read and written. Also, the jsonlite package does far more than what we detailed in this section. But at this juncture, this is an adequate understanding of things.</p>
</div>
</div>
<div id="basics-javascript" class="section level2">
<h2><span class="header-section-number">2.3</span> JavaScript</h2>
<p>The book is not meant to teach JavaScript, only to show how graciously it can work with R. Let us thus go through the very basics to ensure we know enough to get started with the coming chapters.</p>
<p>The easiest way to run JavaScript interactively is probably to create an HTML file (e.g.: <code>try.html</code>), write your code within a <code>&lt;script&gt;</code> tag and open the file in your web browser. The console output can be observed in the console of the browser, developer tools (see Figure <a href="prerequisites.html#fig:trying-js">2.3</a>).</p>
<div class="sourceCode" id="cb27"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb27-1" title="1"><span class="er">&lt;</span>!–– index.html ––&gt;</a>
<a class="sourceLine" id="cb27-2" title="2"><span class="kw">&lt;html&gt;</span></a>
<a class="sourceLine" id="cb27-3" title="3">  <span class="kw">&lt;head&gt;</span></a>
<a class="sourceLine" id="cb27-4" title="4">  <span class="kw">&lt;/head&gt;</span></a>
<a class="sourceLine" id="cb27-5" title="5">  <span class="kw">&lt;body&gt;</span></a>
<a class="sourceLine" id="cb27-6" title="6">    <span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;content&quot;</span><span class="kw">&gt;</span>Trying JavaScript!<span class="kw">&lt;/p&gt;</span></a>
<a class="sourceLine" id="cb27-7" title="7">  <span class="kw">&lt;/body&gt;</span></a>
<a class="sourceLine" id="cb27-8" title="8">  <span class="kw">&lt;script&gt;</span></a>
<a class="sourceLine" id="cb27-9" title="9">    <span class="co">// place your JavaScript code here</span></a>
<a class="sourceLine" id="cb27-10" title="10">    <span class="va">console</span>.<span class="at">log</span>(<span class="st">&#39;Hello JavaScript!&#39;</span>)</a>
<a class="sourceLine" id="cb27-11" title="11">  <span class="kw">&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb27-12" title="12"><span class="kw">&lt;/html&gt;</span></a></code></pre></div>
<div class="figure" style="text-align: center"><span id="fig:trying-js"></span>
<img src="images/tryingjs.png" alt="Trying JavaScript" width="100%" />
<p class="caption">
FIGURE 2.3: Trying JavaScript
</p>
</div>
<div id="basics-chrome-devtools" class="section level3">
<h3><span class="header-section-number">2.3.1</span> Developer Tools</h3>
<p>Most of the JavaScript code written in this book is intended to be run in web browsers; it is thus vital that you have a great understanding of your web browser and its developer tools (devtools). In this section, we discuss those available in Google Chrome and Chromium, but such tools, albeit somewhat different, also exist in Mozilla Firefox and Safari.</p>
<div class="rmdnote">
<p>
The RStudio IDE is built on Chromium, some of these tools will therefore also work in RStudio.
</p>
</div>
<p>The easiest way to access the developer tools from the browser is by “inspecting”: right-click on an element on a webpage and select “inspect.” This will open the developer tools either at the bottom or on the right (Figure <a href="prerequisites.html#fig:chrome-devtools">2.4</a>) of the page depending on the defaults.</p>
<div class="figure" style="text-align: center"><span id="fig:chrome-devtools"></span>
<img src="images/devtools.png" alt="Google Chrome devtools" width="100%" />
<p class="caption">
FIGURE 2.4: Google Chrome devtools
</p>
</div>
<p>The developer tools pane consists of several tabs but we will mainly use:</p>
<ol style="list-style-type: decimal">
<li>Elements: presents the DOM Tree, the HTML document structure, great for inspecting the structure of the outputs generated from R.</li>
<li>Console: the JavaScript console where messages, errors, and other such things are logged. Essential for debugging.</li>
</ol>
</div>
<div id="basics-var-scope" class="section level3">
<h3><span class="header-section-number">2.3.2</span> Variable Declaration and Scope</h3>
<p>One significant way JavaScript differs from R is that variables must be declared using one of three keywords, <code>var</code>, <code>let</code>, or <code>const</code>, which mainly affect the scope where the declared variable will be accessible.</p>
<div class="sourceCode" id="cb28"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb28-1" title="1">x <span class="op">=</span> <span class="dv">1</span><span class="op">;</span> <span class="co">// error</span></a>
<a class="sourceLine" id="cb28-2" title="2"><span class="kw">var</span> x <span class="op">=</span> <span class="dv">1</span><span class="op">;</span> <span class="co">// works</span></a></code></pre></div>
<p>One can declare a variable without assigning a value to it, to then do so later on.</p>
<div class="sourceCode" id="cb29"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb29-1" title="1"><span class="kw">var</span> y<span class="op">;</span> <span class="co">// declare </span></a>
<a class="sourceLine" id="cb29-2" title="2">y <span class="op">=</span> [<span class="dv">1</span><span class="op">,</span><span class="dv">2</span><span class="op">,</span><span class="dv">3</span>]<span class="op">;</span> <span class="co">// define it as array</span></a>
<a class="sourceLine" id="cb29-3" title="3">y <span class="op">=</span> <span class="st">&#39;string&#39;</span><span class="op">;</span> <span class="co">// change to character string</span></a></code></pre></div>
<p>The <code>let</code> and <code>const</code> keywords were added in ES2015; the <code>const</code> is used to define a constant: a variable that once declared cannot be changed.</p>
<div class="sourceCode" id="cb30"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb30-1" title="1"><span class="kw">const</span> x <span class="op">=</span> <span class="dv">1</span><span class="op">;</span> <span class="co">// declare constant</span></a>
<a class="sourceLine" id="cb30-2" title="2">x <span class="op">=</span> <span class="dv">2</span><span class="op">;</span> <span class="co">// error</span></a></code></pre></div>
<p>Though this is probably only rarely done in R, one can produce something similar by locking the binding for a variable in its environment.</p>
<div class="sourceCode" id="cb31"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb31-1" title="1">x &lt;-<span class="st"> </span><span class="dv">1</span> <span class="co"># declare x</span></a>
<a class="sourceLine" id="cb31-2" title="2"><span class="kw">lockBinding</span>(<span class="st">&quot;x&quot;</span>, <span class="dt">env =</span> .GlobalEnv) <span class="co"># make constant</span></a>
<a class="sourceLine" id="cb31-3" title="3">x &lt;-<span class="st"> </span><span class="dv">2</span> <span class="co"># error</span></a>
<a class="sourceLine" id="cb31-4" title="4"><span class="kw">unlockBinding</span>(<span class="st">&quot;x&quot;</span>, <span class="dt">env =</span> .GlobalEnv) <span class="co"># unlock binding</span></a>
<a class="sourceLine" id="cb31-5" title="5">x &lt;-<span class="st"> </span><span class="dv">2</span> <span class="co"># works</span></a></code></pre></div>
<p>Notably, <code>const</code> is mainly protecting yourself (the developer) against yourself; if something important is defined and should not change later in the code use <code>const</code> to avoid accidentally reassigning something to it later in the project.</p>
<p>The <code>let</code> keyword is akin to declaring a variable with the <code>var</code> keyword. However, <code>let</code> (and <code>const</code>) will declare the variable in the “block scope.” In effect, this further narrows down the scope where the variable will be accessible. A block scope is generally the area within <code>if</code>, <code>switch</code> conditions or <code>for</code> and <code>while</code> loops: areas within curly brackets.</p>
<div class="sourceCode" id="cb32"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb32-1" title="1"><span class="cf">if</span>(<span class="kw">true</span>)<span class="op">{</span></a>
<a class="sourceLine" id="cb32-2" title="2">  <span class="kw">let</span> x <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></a>
<a class="sourceLine" id="cb32-3" title="3">  <span class="kw">var</span> y <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></a>
<a class="sourceLine" id="cb32-4" title="4"><span class="op">}</span></a>
<a class="sourceLine" id="cb32-5" title="5"></a>
<a class="sourceLine" id="cb32-6" title="6"><span class="va">console</span>.<span class="at">log</span>(x) <span class="co">// error x does not exist</span></a>
<a class="sourceLine" id="cb32-7" title="7"><span class="va">console</span>.<span class="at">log</span>(y) <span class="co">// works</span></a></code></pre></div>
<p>In the above example, <code>x</code> is only accessible within the if statement as it is declared with <code>let</code>, <code>var</code> does not have block scope.</p>
<p>While on the subject of scope, in R like in JavaScript, variables can be accessed from the parent environment (often referred to as “context” in the latter). One immense difference though is that while it is seen as bad practice in R, it is not in JavaScript where it is beneficial.</p>
<div class="sourceCode" id="cb33"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb33-1" title="1"><span class="co"># it works but don&#39;t do this in R</span></a>
<a class="sourceLine" id="cb33-2" title="2">x &lt;-<span class="st"> </span><span class="dv">123</span></a>
<a class="sourceLine" id="cb33-3" title="3">foo &lt;-<span class="st"> </span><span class="cf">function</span>(){</a>
<a class="sourceLine" id="cb33-4" title="4">  <span class="kw">print</span>(x)</a>
<a class="sourceLine" id="cb33-5" title="5">}</a>
<a class="sourceLine" id="cb33-6" title="6"><span class="kw">foo</span>()</a>
<a class="sourceLine" id="cb33-7" title="7"><span class="co">#&gt; [1] 123</span></a></code></pre></div>
<p>The above R code can be re-written in JavaScript. Note the slight variation in the function declaration.</p>
<div class="sourceCode" id="cb34"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb34-1" title="1"><span class="co">// this is perfectly fine</span></a>
<a class="sourceLine" id="cb34-2" title="2"><span class="kw">var</span> x <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></a>
<a class="sourceLine" id="cb34-3" title="3"></a>
<a class="sourceLine" id="cb34-4" title="4"><span class="kw">function</span> <span class="at">foo</span>()<span class="op">{</span></a>
<a class="sourceLine" id="cb34-5" title="5">  <span class="va">console</span>.<span class="at">log</span>(x)<span class="op">;</span> <span class="co">// print to console</span></a>
<a class="sourceLine" id="cb34-6" title="6"><span class="op">}</span></a>
<a class="sourceLine" id="cb34-7" title="7"></a>
<a class="sourceLine" id="cb34-8" title="8"><span class="at">foo</span>()<span class="op">;</span></a></code></pre></div>
<div class="rmdnote">
<p>
Accessing variables from the parent environment (context) is useful in JavaScript but should not be done in R
</p>
</div>
</div>
<div id="basics-object-model" class="section level3">
<h3><span class="header-section-number">2.3.3</span> Document Object Model</h3>
<p>One concept does not exist in R is that of the “DOM” which stands for Document Object Model; this is also often referred to as the DOM tree (represented in Figure <a href="prerequisites.html#fig:dom-viz">2.5</a>) as it very much follows a tree-like structure.</p>
<div class="figure" style="text-align: center"><span id="fig:dom-viz"></span>
<div id="htmlwidget-4c9f283262b9ae6159b1" style="width:100%;height:250px;" class="grViz html-widget"></div>
<script type="application/json" data-for="htmlwidget-4c9f283262b9ae6159b1">{"x":{"diagram":"\ngraph {\n  graph [rankdir = TD]\n\n  node [shape=box]\n  \"document\"\n  \"<html>\"\n  \"<head>\"\n  \"<body>\"\n  \"<title>\"\n  \"<h1>\"\n  \"<div>\"\n  \"<a>\"\n\n  \"document\" -- \"<html>\"\n  \"<html>\" -- \"<head>\"\n  \"<html>\" -- \"<body>\"\n  \"<head>\" -- \"<title>\"\n  \"<body>\" -- \"<h1>\"\n  \"<body>\" -- \"<div>\"\n  \"<div>\" -- \"<a>\"\n\n}\n","config":{"engine":"dot","options":null}},"evals":[],"jsHooks":[]}</script>
<p class="caption">
FIGURE 2.5: Document Object Model visualisation
</p>
</div>
<p>When a web page is loaded, the browser creates a Document Object Model of the web page, which can be accessed in JavaScript from the <code>document</code> object. This lets the developer programmatically manipulate the page itself so one can, for instance, add an element (e.g., a button), change the text of another, and plenty more.</p>
<p>The JavaScript code below grabs the element where <code>id='content'</code> from the <code>document</code> with <code>getElementById</code> and replaces the text (<code>innerText</code>). Even though the page only contains “Trying JavaScript!” when the page is opened (loaded) in the web browser JavaScript runs the code and changes it: this happens very fast so the original text cannot be seen.</p>
<div class="sourceCode" id="cb35"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb35-1" title="1"> <span class="er">&lt;</span>!–– index.html ––&gt;</a>
<a class="sourceLine" id="cb35-2" title="2"><span class="kw">&lt;html&gt;</span></a>
<a class="sourceLine" id="cb35-3" title="3">  <span class="kw">&lt;head&gt;</span></a>
<a class="sourceLine" id="cb35-4" title="4">  <span class="kw">&lt;/head&gt;</span></a>
<a class="sourceLine" id="cb35-5" title="5">  <span class="kw">&lt;body&gt;</span></a>
<a class="sourceLine" id="cb35-6" title="6">    <span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;content&quot;</span><span class="kw">&gt;</span>Trying JavaScript!<span class="kw">&lt;/p&gt;</span></a>
<a class="sourceLine" id="cb35-7" title="7">  <span class="kw">&lt;/body&gt;</span></a>
<a class="sourceLine" id="cb35-8" title="8">  <span class="kw">&lt;script&gt;</span></a>
<a class="sourceLine" id="cb35-9" title="9">    <span class="kw">var</span> cnt <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;content&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb35-10" title="10">    <span class="va">cnt</span>.<span class="at">innerText</span> <span class="op">=</span> <span class="st">&quot;The text has changed&quot;</span><span class="op">;</span></a>
<a class="sourceLine" id="cb35-11" title="11">  <span class="kw">&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb35-12" title="12"><span class="kw">&lt;/html&gt;</span></a></code></pre></div>
<p>One final thing to note for future reference: though not limited to the ids or classes most of such selection of elements from the DOM are done with those where the pound sign refers to an element’s id (<code>#id</code>) and a dot relates to an element’s class (<code>.class</code>), just like in CSS.</p>
<div class="sourceCode" id="cb36"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb36-1" title="1"> <span class="er">&lt;</span>!–– index.html ––&gt;</a>
<a class="sourceLine" id="cb36-2" title="2"><span class="kw">&lt;html&gt;</span></a>
<a class="sourceLine" id="cb36-3" title="3">  <span class="kw">&lt;head&gt;</span></a>
<a class="sourceLine" id="cb36-4" title="4">  <span class="kw">&lt;/head&gt;</span></a>
<a class="sourceLine" id="cb36-5" title="5">  <span class="kw">&lt;body&gt;</span></a>
<a class="sourceLine" id="cb36-6" title="6">    <span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;content&quot;</span><span class="ot"> class=</span><span class="st">&quot;stuff&quot;</span><span class="kw">&gt;</span>Trying JavaScript!<span class="kw">&lt;/p&gt;</span></a>
<a class="sourceLine" id="cb36-7" title="7">  <span class="kw">&lt;/body&gt;</span></a>
<a class="sourceLine" id="cb36-8" title="8">  <span class="kw">&lt;script&gt;</span></a>
<a class="sourceLine" id="cb36-9" title="9">    <span class="co">// select by id</span></a>
<a class="sourceLine" id="cb36-10" title="10">    <span class="kw">var</span> x <span class="op">=</span> <span class="va">document</span>.<span class="at">getElementById</span>(<span class="st">&quot;content&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb36-11" title="11">    <span class="kw">var</span> y <span class="op">=</span> <span class="va">document</span>.<span class="at">querySelector</span>(<span class="st">&quot;#content&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb36-12" title="12"></a>
<a class="sourceLine" id="cb36-13" title="13">    <span class="va">console</span>.<span class="at">log</span>(x <span class="op">==</span> y)<span class="op">;</span> <span class="co">// true</span></a>
<a class="sourceLine" id="cb36-14" title="14"></a>
<a class="sourceLine" id="cb36-15" title="15">    <span class="co">// select by class</span></a>
<a class="sourceLine" id="cb36-16" title="16">    <span class="kw">var</span> z <span class="op">=</span> <span class="va">document</span>.<span class="at">querySelector</span>(<span class="st">&quot;.stuff&quot;</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb36-17" title="17">  <span class="kw">&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb36-18" title="18"><span class="kw">&lt;/html&gt;</span></a></code></pre></div>
<p>Getting elements from the DOM is a very common operation in JavaScript. A class can be applied to multiple elements, which is useful to select and apply actions to multiple elements. The id attribute must be unique (two elements cannot bear the same id in the HTML document), which is useful to retrieve a specific element.</p>
<p>Interestingly some of that mechanism is used by Shiny to retrieve and manipulate inputs; the argument <code>inputId</code> of Shiny inputs effectively defines the HTML <code>id</code> attribute of said input. Shiny can then internally use functions the likes of <code>getElementById</code> in order to get those inputs, set or update their values, etc.</p>
<div class="sourceCode" id="cb37"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb37-1" title="1">shiny<span class="op">::</span><span class="kw">actionButton</span>(<span class="dt">inputId =</span> <span class="st">&quot;theId&quot;</span>, <span class="dt">label =</span> <span class="st">&quot;the label&quot;</span>) </a></code></pre></div>
<div class="sourceCode" id="cb38"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb38-1" title="1"><span class="kw">&lt;button</span> </a>
<a class="sourceLine" id="cb38-2" title="2"><span class="ot">  id=</span><span class="st">&quot;theId&quot;</span> </a>
<a class="sourceLine" id="cb38-3" title="3"><span class="ot">  type=</span><span class="st">&quot;button&quot;</span> </a>
<a class="sourceLine" id="cb38-4" title="4"><span class="ot">  class=</span><span class="st">&quot;btn btn-default action-button&quot;</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb38-5" title="5">  the label</a>
<a class="sourceLine" id="cb38-6" title="6"><span class="kw">&lt;/button&gt;</span></a></code></pre></div>
<p>This, of course, only scratches the surface of JavaScript; thus, this provides ample understanding of the language to keep up with the next chapters. Also, a somewhat interesting fact that will prove useful later in the book: the RStudio IDE is actually a browser, therefore, in the IDE, one can right-click and “inspect element” to view the rendered source code.</p>
</div>
</div>
<div id="basics-shiny" class="section level2">
<h2><span class="header-section-number">2.4</span> Shiny</h2>
<p>It is assumed that the reader has basic knowledge of the Shiny framework and already used it to build applications. However, there are some more obscure functionalities that one may not know, but that becomes essential when introducing JavaScript to applications. Chiefly, how to import external dependencies; JavaScript or otherwise.</p>
<p>There are two ways to import dependencies: using the htmltools <span class="citation">(Cheng et al. <a href="#ref-R-htmltools">2021</a>)</span> package to create a dependency object that Shiny can understand, or manually serving and importing the files with Shiny.</p>
<div id="basics-static-files" class="section level3">
<h3><span class="header-section-number">2.4.1</span> Serving Static Files</h3>
<p>Static files are files that are downloaded by the clients, in this case, web browsers accessing Shiny applications, as-is. These generally include images, CSS (<code>.css</code>), and JavaScript (<code>.js</code>).</p>
<p>If you are familiar with R packages, static files are to Shiny applications what the <code>inst</code> directory is to an R package; those files are installed as-is. They do not require further processing as opposed to the <code>src</code> folder, which contains files that need compiling, for instance.</p>
<p>There are numerous functions to launch a Shiny application locally; the two most used are probably <code>shinyApp</code> and <code>runApp</code>. The RStudio IDE comes with a convenient “Run” button when writing a shiny application, which when clicked in fact uses the function <code>shiny::runApp</code> in the background. This function looks for said static files in the <code>www</code> directory and makes them available at the same path (<code>/www</code>). If you are building your applications outside of RStudio, you should either also use <code>shiny::runApp</code> or specify the directory which then allows using <code>shiny::shinyApp</code>. Note that this only applies locally; Shiny server (community and pro) as well as <a href="https://www.shinyapps.io/">shinyapps.io</a> use the same defaults as the RStudio IDE and <code>shiny::runApp</code>.</p>
<p>To ensure the code in this book can run regardless of the reader’s machine or editor, the asset directory is always specified explicitly (when used). This is probably advised to steer clear of the potential headaches as, unlike the default, it’ll work regardless of the environment. If you are using golem <span class="citation">(Guyader et al. <a href="#ref-R-golem">2020</a>)</span> to develop your application, then you should not worry about this as it specifies the directory internally.</p>
<p>Below we build a basic Shiny application. However, before we define the <code>ui</code> and <code>server</code>, we use the <code>shiny::addResourcePath</code> function to specify the location of the directory of static files that will be served by the server and thus accessible by the client. This function takes two arguments: first the <code>prefix</code>, which is the path (URL) at which the assets will be available, second the path to the directory of static assets.</p>
<p>We thus create the “assets” directory and a JavaScript file called <code>script.js</code> within it.</p>
<div class="sourceCode" id="cb39"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb39-1" title="1"><span class="co"># run from root of app (where app.R is located)</span></a>
<a class="sourceLine" id="cb39-2" title="2"><span class="kw">dir.create</span>(<span class="st">&quot;assets&quot;</span>)</a>
<a class="sourceLine" id="cb39-3" title="3"><span class="kw">writeLines</span>(<span class="st">&quot;console.log(&#39;Hello JS!&#39;);&quot;</span>, <span class="dt">con =</span> <span class="st">&quot;assets/script.js&quot;</span>)</a></code></pre></div>
<p>We can now use the <code>shiny::addResourcePath</code> to point to this directory. Generally, the same name for the directory of static assets and prefix is used to avoid confusion; below we name them differently for the reader to clearly distinguish which is which.</p>
<div class="sourceCode" id="cb40"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb40-1" title="1"><span class="co"># app.R</span></a>
<a class="sourceLine" id="cb40-2" title="2"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb40-3" title="3"></a>
<a class="sourceLine" id="cb40-4" title="4"><span class="co"># serve the files</span></a>
<a class="sourceLine" id="cb40-5" title="5"><span class="kw">addResourcePath</span>(</a>
<a class="sourceLine" id="cb40-6" title="6">  <span class="co"># will be accessible at /files</span></a>
<a class="sourceLine" id="cb40-7" title="7">  <span class="dt">prefix =</span> <span class="st">&quot;files&quot;</span>, </a>
<a class="sourceLine" id="cb40-8" title="8">  <span class="co"># path to the assets directory</span></a>
<a class="sourceLine" id="cb40-9" title="9">  <span class="dt">directoryPath =</span> <span class="st">&quot;assets&quot;</span></a>
<a class="sourceLine" id="cb40-10" title="10">)</a>
<a class="sourceLine" id="cb40-11" title="11"></a>
<a class="sourceLine" id="cb40-12" title="12">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb40-13" title="13">  <span class="kw">h1</span>(<span class="st">&quot;R and JavaScript&quot;</span>)</a>
<a class="sourceLine" id="cb40-14" title="14">)</a>
<a class="sourceLine" id="cb40-15" title="15"></a>
<a class="sourceLine" id="cb40-16" title="16">server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output){}</a>
<a class="sourceLine" id="cb40-17" title="17"></a>
<a class="sourceLine" id="cb40-18" title="18"><span class="kw">shinyApp</span>(ui, server)</a></code></pre></div>
<p>If you then run the application and open it at the <code>/files/script.js</code> path (e.g.: <code>127.0.0.1:3000/files/script.js</code>) you should see the content of the JavaScript file (<code>console.log('Hello JS!')</code>), commenting the <code>addResourcePath</code> line will have a “Not Found” error displayed on the page instead.</p>
<div class="rmdnote">
<p>
All files in your asset directory will be served online and accessible to anyone: do not place sensitive files in it.
</p>
</div>
<p>Though one may create multiple such directories and correspondingly use <code>addResourcePath</code> to specify multiple paths and prefixes, one will routinely specify a single one, named “assets” or “static,” which contains multiple subdirectories, one for each type of static file to obtain a directory that looks something like the tree below. This is, however, an unwritten convention which is by no means forced upon the developer: do as you wish.</p>
<pre><code>assets/
├── js/
│    └── script.js
├── css/
│    └── style.css
└── img/
     └── pic.png</code></pre>
<p>At this stage, we have made the JavaScript file we created accessible by the clients, but we still have to source this file in the <code>ui</code> as currently this file is, though served, not used by the application. Were one creating a static HTML page one would use the <code>script</code> to <code>src</code> the file in the <code>head</code> of the page.</p>
<div class="sourceCode" id="cb42"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb42-1" title="1"><span class="kw">&lt;html&gt;</span></a>
<a class="sourceLine" id="cb42-2" title="2">  <span class="kw">&lt;head&gt;</span></a>
<a class="sourceLine" id="cb42-3" title="3">    <span class="er">&lt;</span>!–– source the JavaScript file ––&gt;</a>
<a class="sourceLine" id="cb42-4" title="4">    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;path/to/script.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb42-5" title="5">  <span class="kw">&lt;/head&gt;</span></a>
<a class="sourceLine" id="cb42-6" title="6">  <span class="kw">&lt;body&gt;</span></a>
<a class="sourceLine" id="cb42-7" title="7">    <span class="kw">&lt;p</span><span class="ot"> id=</span><span class="st">&quot;content&quot;</span><span class="kw">&gt;</span>Trying JavaScript!<span class="kw">&lt;/p&gt;</span></a>
<a class="sourceLine" id="cb42-8" title="8">  <span class="kw">&lt;/body&gt;</span></a>
<a class="sourceLine" id="cb42-9" title="9"><span class="kw">&lt;/html&gt;</span></a></code></pre></div>
<p>In Shiny we write the UI in R and not in HTML (though this is also supported). Given the resemblance between the names of HTML tags and Shiny UI functions, it is pretty straightforward; the html page above would look something like the Shiny <code>ui</code> below.</p>
<div class="sourceCode" id="cb43"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb43-1" title="1"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb43-2" title="2"></a>
<a class="sourceLine" id="cb43-3" title="3">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb43-4" title="4">  <span class="kw">singleton</span>(</a>
<a class="sourceLine" id="cb43-5" title="5">    tags<span class="op">$</span><span class="kw">head</span>(</a>
<a class="sourceLine" id="cb43-6" title="6">      tags<span class="op">$</span><span class="kw">script</span>(<span class="dt">src =</span> <span class="st">&quot;path/to/script.js&quot;</span>)</a>
<a class="sourceLine" id="cb43-7" title="7">    )</a>
<a class="sourceLine" id="cb43-8" title="8">  ),</a>
<a class="sourceLine" id="cb43-9" title="9">  <span class="kw">p</span>(<span class="dt">id =</span> <span class="st">&quot;content&quot;</span>, <span class="st">&quot;Trying JavaScript!&quot;</span>)</a>
<a class="sourceLine" id="cb43-10" title="10">)</a></code></pre></div>
<p>The dependency is used in the <code>htmltools::singleton</code> function ensures that its content is <em>only imported in the document once.</em></p>
<p>Note that we use the <code>tags</code> object, which comes from the Shiny package and includes HTML tags that are not exported as standalone functions. For instance, you can create a <code>&lt;div&gt;</code> in Shiny with the <code>div</code> function, but <code>tags$div</code> will also work. This can now be applied to the Shiny application; the <code>path/to/script.js</code> should be changed to <code>files/script.js</code>, where <code>files</code> is the prefix we defined in <code>addResourcePath</code>.</p>
<div class="sourceCode" id="cb44"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb44-1" title="1"><span class="co"># app.R</span></a>
<a class="sourceLine" id="cb44-2" title="2"><span class="kw">library</span>(shiny)</a>
<a class="sourceLine" id="cb44-3" title="3"></a>
<a class="sourceLine" id="cb44-4" title="4"><span class="co"># serve the files</span></a>
<a class="sourceLine" id="cb44-5" title="5"><span class="kw">addResourcePath</span>(<span class="dt">prefix =</span> <span class="st">&quot;files&quot;</span>, <span class="dt">directoryPath =</span> <span class="st">&quot;assets&quot;</span>)</a>
<a class="sourceLine" id="cb44-6" title="6"></a>
<a class="sourceLine" id="cb44-7" title="7">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb44-8" title="8">  tags<span class="op">$</span><span class="kw">head</span>(</a>
<a class="sourceLine" id="cb44-9" title="9">    tags<span class="op">$</span><span class="kw">script</span>(<span class="dt">src =</span> <span class="st">&quot;files/script.js&quot;</span>)</a>
<a class="sourceLine" id="cb44-10" title="10">  ),</a>
<a class="sourceLine" id="cb44-11" title="11">  <span class="kw">h1</span>(<span class="st">&quot;R and JavaScript&quot;</span>)</a>
<a class="sourceLine" id="cb44-12" title="12">)</a>
<a class="sourceLine" id="cb44-13" title="13"></a>
<a class="sourceLine" id="cb44-14" title="14">server &lt;-<span class="st"> </span><span class="cf">function</span>(input, output){}</a>
<a class="sourceLine" id="cb44-15" title="15"></a>
<a class="sourceLine" id="cb44-16" title="16"><span class="kw">shinyApp</span>(ui, server)</a></code></pre></div>
<p>From the browser, inspecting page (right click &gt; inspect &gt; console tab) one should see <code>Hello JS!</code> in the console, which means the application correctly ran the code in the JavaScript file.</p>
</div>
<div id="basics-htmltools" class="section level3">
<h3><span class="header-section-number">2.4.2</span> Htmltools</h3>
<p>The htmltools package powers much of the Shiny UI, most of the tags that comprise the UI are indeed imported by Shiny from htmltools. For instance <code>shiny::actionButton</code> is just a light wrapper around htmltools <code>tags</code>.</p>
<div class="sourceCode" id="cb45"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb45-1" title="1">shiny<span class="op">::</span>actionButton</a></code></pre></div>
<div class="sourceCode" id="cb46"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb46-1" title="1"><span class="cf">function</span> (inputId, label, <span class="dt">icon =</span> <span class="ot">NULL</span>, <span class="dt">width =</span> <span class="ot">NULL</span>, ...) </a>
<a class="sourceLine" id="cb46-2" title="2">{</a>
<a class="sourceLine" id="cb46-3" title="3">    value &lt;-<span class="st"> </span><span class="kw">restoreInput</span>(<span class="dt">id =</span> inputId, <span class="dt">default =</span> <span class="ot">NULL</span>)</a>
<a class="sourceLine" id="cb46-4" title="4">    tags<span class="op">$</span><span class="kw">button</span>(</a>
<a class="sourceLine" id="cb46-5" title="5">      <span class="dt">id =</span> inputId, <span class="dt">style =</span> <span class="cf">if</span> (<span class="op">!</span><span class="kw">is.null</span>(width)) </a>
<a class="sourceLine" id="cb46-6" title="6">      <span class="kw">paste0</span>(<span class="st">&quot;width: &quot;</span>, <span class="kw">validateCssUnit</span>(width), <span class="st">&quot;;&quot;</span>),</a>
<a class="sourceLine" id="cb46-7" title="7">      <span class="dt">type =</span> <span class="st">&quot;button&quot;</span>, <span class="dt">class =</span> <span class="st">&quot;btn btn-default action-button&quot;</span>, </a>
<a class="sourceLine" id="cb46-8" title="8">      <span class="st">`</span><span class="dt">data-val</span><span class="st">`</span> =<span class="st"> </span>value, <span class="kw">list</span>(<span class="kw">validateIcon</span>(icon), label), </a>
<a class="sourceLine" id="cb46-9" title="9">      ...</a>
<a class="sourceLine" id="cb46-10" title="10">    )</a>
<a class="sourceLine" id="cb46-11" title="11">}</a></code></pre></div>
<p>As the name indicates, htmltools goes beyond the generation of HTML tags and provides broader tools to work with HTML from R; this includes working the dependencies. These may appear simple at first: after all, were one working with an HTML document in order to import HTML or CSS one could use HTML tags.</p>
<div class="sourceCode" id="cb47"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb47-1" title="1"> <span class="er">&lt;</span>!–– index.html ––&gt;</a>
<a class="sourceLine" id="cb47-2" title="2"><span class="kw">&lt;html&gt;</span></a>
<a class="sourceLine" id="cb47-3" title="3">  <span class="kw">&lt;head&gt;</span></a>
<a class="sourceLine" id="cb47-4" title="4">    <span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;path/to/script.js&quot;</span><span class="kw">&gt;&lt;/script&gt;</span></a>
<a class="sourceLine" id="cb47-5" title="5">    <span class="kw">&lt;link</span><span class="ot"> rel=</span><span class="st">&quot;stylesheet&quot;</span><span class="ot"> href=</span><span class="st">&quot;path/to/styles.css&quot;</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb47-6" title="6">  <span class="kw">&lt;/head&gt;</span></a>
<a class="sourceLine" id="cb47-7" title="7">  <span class="kw">&lt;body&gt;&lt;/body&gt;</span></a>
<a class="sourceLine" id="cb47-8" title="8"><span class="kw">&lt;/html&gt;</span></a></code></pre></div>
<p>However, it can quickly get out of hand when working with modules and packages. Imagine having to manage the generation of dependencies, such as the above when multiple functions rely on a dependency, but being a dependency, it should only be imported once? The unified framework htmltools helps immensely in dealing with these sorts of issues.</p>
<p>The htmltools package provides utilities to import dependencies and ensure these are only rendered once, as they should be. The way this works is by creating a dependency object that packages like Shiny and R markdown can understand and translate into HTML dependencies. This is handled with the <code>htmlDependency</code> function, which returns an object of class <code>html_dependency</code>.</p>
<div class="sourceCode" id="cb48"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb48-1" title="1">dependency &lt;-<span class="st"> </span>htmltools<span class="op">::</span><span class="kw">htmlDependency</span>(</a>
<a class="sourceLine" id="cb48-2" title="2">  <span class="dt">name =</span> <span class="st">&quot;myDependency&quot;</span>,</a>
<a class="sourceLine" id="cb48-3" title="3">  <span class="dt">version =</span> <span class="st">&quot;1.0.0&quot;</span>,</a>
<a class="sourceLine" id="cb48-4" title="4">  <span class="dt">src =</span> <span class="kw">c</span>(<span class="dt">file =</span> <span class="st">&quot;path/to/directory&quot;</span>),</a>
<a class="sourceLine" id="cb48-5" title="5">  <span class="dt">script =</span> <span class="st">&quot;script.js&quot;</span>,</a>
<a class="sourceLine" id="cb48-6" title="6">  <span class="dt">stylesheet =</span> <span class="st">&quot;styles.css&quot;</span></a>
<a class="sourceLine" id="cb48-7" title="7">)</a></code></pre></div>
<p>About the above, the <code>src</code> argument points to the directory that contains the dependencies (<code>script</code> and <code>stylesheet</code>); this is done with a named vector where <code>file</code> indicates the path is a local directory and <code>href</code> indicates it is a remote server, generally a CDN. Note that one can also pass multiple <code>script</code> and <code>stylesheet</code> by using vectors, e.g.: <code>c("script.js", "anotherScript.js")</code></p>
<div class="rmdnote">
<p>
CDN stands for Content Delivery Network, a geographically distributed group of servers that provide fast transfer of dependencies.
</p>
</div>
<div class="sourceCode" id="cb49"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb49-1" title="1"><span class="co"># dependency to the latest jQuery</span></a>
<a class="sourceLine" id="cb49-2" title="2">dependency &lt;-<span class="st"> </span>htmltools<span class="op">::</span><span class="kw">htmlDependency</span>(</a>
<a class="sourceLine" id="cb49-3" title="3">  <span class="dt">name =</span> <span class="st">&quot;myDependency&quot;</span>,</a>
<a class="sourceLine" id="cb49-4" title="4">  <span class="dt">version =</span> <span class="st">&quot;1.0.0&quot;</span>,</a>
<a class="sourceLine" id="cb49-5" title="5">  <span class="dt">src =</span> <span class="kw">c</span>(</a>
<a class="sourceLine" id="cb49-6" title="6">    <span class="dt">href =</span> <span class="st">&quot;https://cdn.jsdelivr.net/gh/jquery/jquery/dist/&quot;</span></a>
<a class="sourceLine" id="cb49-7" title="7">  ),</a>
<a class="sourceLine" id="cb49-8" title="8">  <span class="dt">script =</span> <span class="st">&quot;jquery.min.js&quot;</span></a>
<a class="sourceLine" id="cb49-9" title="9">)</a></code></pre></div>
<p>Shiny, R markdown, and other packages where htmltools is relevant will then be able to translate an <code>html_dependency</code> object into actual HTML dependencies. The above would, for instance, generate the following HTML.</p>
<div class="sourceCode" id="cb50"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb50-1" title="1"><span class="kw">&lt;script</span> </a>
<a class="sourceLine" id="cb50-2" title="2"><span class="ot">  src=</span><span class="st">&quot;https://cdn.jsdelivr.net/gh/jquery/jquery/</span></a>
<a class="sourceLine" id="cb50-3" title="3"><span class="st">    dist/jquery.min.js&quot;</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb50-4" title="4"><span class="kw">&lt;/script&gt;</span></a></code></pre></div>
<p>Notably, the <code>htmltools::htmlDependency</code> also takes a <code>package</code> argument, which makes it such that the <code>src</code> path becomes relative to the package directory (the <code>inst</code> folder). Hence the snippet below imports a file located at <code>myPackage/inst/assets/script.js</code>; the ultimate full path will, of course, depend on where the package is installed on the users’ machine.</p>
<div class="sourceCode" id="cb51"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb51-1" title="1">dependency &lt;-<span class="st"> </span>htmltools<span class="op">::</span><span class="kw">htmlDependency</span>(</a>
<a class="sourceLine" id="cb51-2" title="2">  <span class="dt">name =</span> <span class="st">&quot;myDependency&quot;</span>,</a>
<a class="sourceLine" id="cb51-3" title="3">  <span class="dt">version =</span> <span class="st">&quot;1.0.0&quot;</span>,</a>
<a class="sourceLine" id="cb51-4" title="4">  <span class="dt">src =</span> <span class="st">&quot;assets&quot;</span>,</a>
<a class="sourceLine" id="cb51-5" title="5">  <span class="dt">script =</span> <span class="kw">c</span>(<span class="dt">file =</span> <span class="st">&quot;script.js&quot;</span>),</a>
<a class="sourceLine" id="cb51-6" title="6">  <span class="dt">package =</span> <span class="st">&quot;myPackage&quot;</span> <span class="co"># user package</span></a>
<a class="sourceLine" id="cb51-7" title="7">)</a></code></pre></div>
<p>However, how does one use it in R markdown or Shiny? Well, merely placing it in the Shiny UI or an evaluated R markdown chunk will do the job.</p>
<div class="sourceCode" id="cb52"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb52-1" title="1"><span class="co"># place it in the shiny UI</span></a>
<a class="sourceLine" id="cb52-2" title="2">ui &lt;-<span class="st"> </span><span class="kw">fluidPage</span>(</a>
<a class="sourceLine" id="cb52-3" title="3">  htmltools<span class="op">::</span><span class="kw">htmlDependency</span>(</a>
<a class="sourceLine" id="cb52-4" title="4">    <span class="dt">name =</span> <span class="st">&quot;myDependency&quot;</span>,</a>
<a class="sourceLine" id="cb52-5" title="5">    <span class="dt">version =</span> <span class="st">&quot;1.0.0&quot;</span>,</a>
<a class="sourceLine" id="cb52-6" title="6">    <span class="dt">src =</span> <span class="st">&quot;assets&quot;</span>,</a>
<a class="sourceLine" id="cb52-7" title="7">    <span class="dt">script =</span> <span class="kw">c</span>(<span class="dt">file =</span> <span class="st">&quot;script.js&quot;</span>),</a>
<a class="sourceLine" id="cb52-8" title="8">    <span class="dt">package =</span> <span class="st">&quot;myPackage&quot;</span> <span class="co"># user package</span></a>
<a class="sourceLine" id="cb52-9" title="9">  )</a>
<a class="sourceLine" id="cb52-10" title="10">)</a></code></pre></div>
</div>
<div id="basics-deps-pro-cons" class="section level3">
<h3><span class="header-section-number">2.4.3</span> Serving vs. htmltools</h3>
<p>For multiple reasons, the best way to include dependencies is probably the former using htmltools. First, it will work with both Shiny and rmarkdown <span class="citation">(Allaire et al. <a href="#ref-R-rmarkdown">2021</a>)</span> (whereas the other method previously described only works with Shiny), reducing the cognitive load on the developer (you). Learn to use this method and you will be able to import dependencies for many different output types. Moreover, it comes with neat features that will be explored later in the book, e.g., dynamic dependencies for interactive visualisations or Shiny.</p>
<p>Also, using htmltools dependencies will allow other package developers to assess and access the dependencies you build quickly. The function <code>findDependencies</code> will accept another function from which it can extract the dependencies. The object it returns can then be used elsewhere, making dependencies portable. Below we use this function to extract the dependencies of the <code>fluidPage</code> function from the Shiny package.</p>
<div class="sourceCode" id="cb53"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb53-1" title="1">htmltools<span class="op">::</span><span class="kw">findDependencies</span>(</a>
<a class="sourceLine" id="cb53-2" title="2">  shiny<span class="op">::</span><span class="kw">fluidPage</span>()</a>
<a class="sourceLine" id="cb53-3" title="3">) </a></code></pre></div>
<pre><code>#&gt; [[1]]
#&gt; List of 10
#&gt;  $ name      : chr &quot;bootstrap&quot;
#&gt;  $ version   : chr &quot;3.4.1&quot;
#&gt;  $ src       :List of 2
#&gt;   ..$ href: chr &quot;shared/bootstrap&quot;
#&gt;   ..$ file: chr &quot;/Library/shiny/www/shared/bootstrap&quot;
#&gt;  $ meta      :List of 1
#&gt;   ..$ viewport: chr &quot;width=device-width, initial-scale=1&quot;
#&gt;  $ script    : chr [1:3] &quot;js/bootstrap.min.js&quot; 
  &quot;shim/html5shiv.min.js&quot; 
  &quot;shim/respond.min.js&quot;
#&gt;  $ stylesheet: chr &quot;css/bootstrap.min.css&quot;
#&gt;  $ head      : NULL
#&gt;  $ attachment: NULL
#&gt;  $ package   : NULL
#&gt;  $ all_files : logi TRUE
#&gt;  - attr(*, &quot;class&quot;)= chr &quot;html_dependency&quot;</code></pre>
<p>Extracting dependencies from other packages will become useful later in the book as we assess compatibility between packages: making sure dependencies do not clash and importing dependencies from other packages.</p>
<p>Using <code>shiny::addResourcePath</code> has one advantage: its use is not limited to making CSS and JavaScript files available in Shiny; it can be used to serve other file types such as JSON or images that may also be needed in the application.</p>

</div>
</div>
</div>



<h3>References</h3>
<div id="refs" class="references">
<div id="ref-R-rmarkdown">
<p>Allaire, JJ, Yihui Xie, Jonathan McPherson, Javier Luraschi, Kevin Ushey, Aron Atkins, Hadley Wickham, Joe Cheng, Winston Chang, and Richard Iannone. 2021. <em>Rmarkdown: Dynamic Documents for R</em>. <a href="https://CRAN.R-project.org/package=rmarkdown">https://CRAN.R-project.org/package=rmarkdown</a>.</p>
</div>
<div id="ref-R-shiny">
<p>Chang, Winston, Joe Cheng, JJ Allaire, Carson Sievert, Barret Schloerke, Yihui Xie, Jeff Allen, Jonathan McPherson, Alan Dipert, and Barbara Borges. 2021. <em>Shiny: Web Application Framework for R</em>. <a href="http://shiny.rstudio.com">http://shiny.rstudio.com</a>.</p>
</div>
<div id="ref-R-htmltools">
<p>Cheng, Joe, Carson Sievert, Winston Chang, Yihui Xie, and Jeff Allen. 2021. <em>Htmltools: Tools for Html</em>. <a href="https://github.com/rstudio/htmltools">https://github.com/rstudio/htmltools</a>.</p>
</div>
<div id="ref-R-golem">
<p>Guyader, Vincent, Colin Fay, Sébastien Rochette, and Cervan Girard. 2020. <em>Golem: A Framework for Robust Shiny Applications</em>. <a href="https://CRAN.R-project.org/package=golem">https://CRAN.R-project.org/package=golem</a>.</p>
</div>
<div id="ref-R-jsonlite">
<p>Ooms, Jeroen. 2020. <em>Jsonlite: A Simple and Robust Json Parser and Generator for R</em>. <a href="https://CRAN.R-project.org/package=jsonlite">https://CRAN.R-project.org/package=jsonlite</a>.</p>
</div>
<div id="ref-R-stringr">
<p>Wickham, Hadley. 2019. <em>Stringr: Simple, Consistent Wrappers for Common String Operations</em>. <a href="https://CRAN.R-project.org/package=stringr">https://CRAN.R-project.org/package=stringr</a>.</p>
</div>
<div id="ref-R-usethis">
<p>Wickham, Hadley, and Jennifer Bryan. 2021. <em>Usethis: Automate Package and Project Setup</em>. <a href="https://CRAN.R-project.org/package=usethis">https://CRAN.R-project.org/package=usethis</a>.</p>
</div>
<div id="ref-R-roxygen2">
<p>Wickham, Hadley, Peter Danenberg, Gábor Csárdi, and Manuel Eugster. 2020. <em>Roxygen2: In-Line Documentation for R</em>. <a href="https://CRAN.R-project.org/package=roxygen2">https://CRAN.R-project.org/package=roxygen2</a>.</p>
</div>
<div id="ref-R-devtools">
<p>Wickham, Hadley, Jim Hester, and Winston Chang. 2020. <em>Devtools: Tools to Make Developing R Packages Easier</em>. <a href="https://CRAN.R-project.org/package=devtools">https://CRAN.R-project.org/package=devtools</a>.</p>
</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="intro-overview.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="widgets-intro-intro.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/lunr.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": false,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"all": {}
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/JohnCoene/javascript-for-r/edit/master/1-02-basics.Rmd",
"text": "Edit"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": {},
"toc": {
"collapse": "section"
}
});
});
</script>

</body>

</html>
